javascript - Angular 2 beta16无法读取未定义的属性 'MinFreeShipping'

Question

我无法在 Angular 2 beta 16 中“打印”变量。这是对服务的调用。如果我记录“this.menu”，它会正确显示，但它在模板文件中不起作用，我收到错误无法读取未定义的属性 MinFreeShipping。

export class MenuComponent {

menu: any;
title = 'asd'; 

constructor(private _restaurantService: RestaurantService) {
    _restaurantService.getMenu(localStorage.getItem('id_firm'))
        .map((res: Response) => { return res.json() })
        .subscribe((data: any) => {
            this.menu = data;
            console.log(this.menu); // Object {Groups: Array[0],VariantGroups: Array[0], MinFreeShipping: 15, ShippingFee: 5}

        });
    }
}

restaurantService中的获取菜单函数为:

getMenu(id: number): any {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('token', localStorage.getItem('auth_token'));

    var uri = this._baseUri + 'Menu' + '/' + id;
    return this.http.get(uri, new RequestOptions({ headers: headers }));            
}

模板是

{{title}} // print [object Object]
{{menu.MinFreeShipping }} // error

Answer 1

发生这种情况是因为您在获得正确的值之前尝试访问它。

当您的模板加载时，您的菜单变量未定义，并且您正在尝试访问 undefined object 的属性。

您在这里可以做的是，您应该为菜单属性定义一个默认值，然后它应该按预期工作。

menu: any = {Groups: [],VariantGroups: [], MinFreeShipping: 0, ShippingFee: 0}

这意味着，最初在您的模板上，您将获得一个具有默认值的 View ，当您的请求的答案返回时，它将被更新。

或者在没有默认值的情况下执行此操作的另一种方法是使用 *ngIf

通过这种方式，您可以检查菜单是否未定义，然后才显示模板的该部分。

<div *ngIf="menu!==undefined">
  {{menu.MinFreeShipping }}
</div>

如果你问我的话，正确的方法是建立一个像这样的模型:

export class MenuModel { 
  Groups: ProductGroupModel[]; 
  VariantGroups: VariantGroupModel[]; 
  MinFreeShipping: number; 
  ShippingFee: number; 

  constructor(obj?: any) {
    this.Groups= obj && obj.Groups || []; // This may also change based on the Groups model you have. You may initialize here also
    this.VariantGroups = obj && obj.VariantGroups || []; // This also
    this.MinFreeShipping= obj && obj.MinFreeShipping || 0;
    this.ShippingFee = obj && obj.ShippingFee || 0;
  }
}

这样你就可以使用:

menu:MenuModel = new MenuModel();

当请求返回时:

this.menu = new MenuModel(data);

这样做的好处是您实际上拥有一个合适的模型。当您从服务器收到的响应不是您的模型，而只是具有相同字段的数据时，就会出现问题。因此，如果您为模型编写 getter 和 setter，如果您不使用服务器中的数据实例化对象，只需使其与您所做的相同，那么它将无法工作。