角2ベータ16未定義のプロパティ 'MinFreeShipping'を読み取ることができません

Question

角2ベータ16の変数を「印刷」できません。サービスへの呼び出しです。私は "this.menu"をログに記録すると正しく表示されますが、テンプレートファイルでは動作しません。エラーが発生するとUndefinedのプロパティ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で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

この方法を用いることであろう。あなたが使用することができます

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

そしてのためのあなたは私に言わせれば

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

それを行うための適切な方法は、このようなモデルを持っているだろう要求が返されます。

this.menu = new MenuModel(data); 

これの利点は、あなたが実際に適切なモデルを持っていることでしょう。あなたのモデルではなく、同じフィールドを持つデータだけのサーバーからの応答を受け取ったときの問題。したがって、モデルのgetterとsetterを記述すると、サーバーからのデータでオブジェクトをインスタンス化せず、単にそれを同じようにするだけで動作しません。