* ngIfを使用して変数が定義されているかどうかをテストする方法Ionic 2

Question

* ngIfを使用して変数が定義されているかどうかを検証する方法はありますか？

以下の例では、item.shippingが定義されていてゼロでないため、HTMLには赤いアイテムのみの送料が表示されます。私は青色の項目（出荷は定義されているがゼロ）のコストを表示したいが、緑色の項目（出荷は定義されていない）は表示しない。

JavaScript:

items = [ 
     { 
     color: 'red', 
     shipping: 2, 
     }, 
     { 
     color: 'blue', 
     shipping: 0, 
     }, 
     { 
     color: 'green', 
     } 
    ]; 
}); 

HTML:

<ul *ngFor='let item of items'> 
    <li *ngIf='item.color'>The color is {{item.color}}</li> 
    <li *ngIf='item.shipping'>The shipping cost is {{item.shipping}}</li> 
</ul> 

それは動作しませんでした。

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'shipping' of undefined TypeError: Cannot read property 'shipping' of undefined

Answer 1

あなたはこの

<ul *ngFor="let item of items"> 
    <li *ngIf="item && item.color">The color is {{item.color}}</li> 
    .... 
</ul> 

のようなものを使用したりsafe navigation operator

<ul *ngFor="let item of items"> 
    <li *ngIf="item?.color">The color is {{item.color}}</li> 
    .... 
</ul>