Angular 2 beta16 Невозможно прочитать свойство «MinFreeShipping» undefined

Question

Я не могу «распечатать» переменную в угловой 2 бета-версии 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

Это происходит потому, что вы пытаетесь получить доступ к нему, прежде чем получить правильное значение.

Когда шаблон загружается, переменная вашего меню не определена, и вы пытаетесь получить доступ к объекту неопределенного объекта.

Что вы можете здесь сделать, так это то, что вы должны определить значение по умолчанию для вашего свойства меню, тогда оно должно работать как ожидалось.

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); 

Преимущество этого в том, что у вас действительно будет подходящая модель. Проблема, когда вы получаете ответ от сервера, который не является вашей моделью, просто данные, имеющие одинаковые поля. Поэтому, если вы пишете геттеры и сеттеры для своей модели, это не сработает, если вы не создадите экземпляр объекта с данными с сервера, просто сравните его, как и вы.