Question

我无法打印＆＃34;角度为2 beta 16的变量。这是对服务的调用。如果我记录＆＃34; this.menu＆＃34;它是正确显示的，但它不在模板文件中工作，我得到的错误无法读取属性MinFreeShipping的undefined。

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中的get菜单功能是：

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

这是因为您在获得正确值之前尝试访问它。

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

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

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

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

或者在没有默认值的情况下执行此操作的另一种方法是使用*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，如果不使用服务器中的数据实例化对象，则无法正常工作，只需使其与您的数据相同即可。

Angular 2 beta16无法读取属性＆＃39; MinFreeShipping＆＃39;未定义的

1 个答案: