javascript - 如何使用 *ngIf 测试变量是否已定义 Ionic 2

Question

有没有一种方法可以使用 *ngIf 来测试变量是否已定义，而不仅仅是它是否为真？

在下面的示例中，HTML 仅显示红色商品的运费，因为 item.shipping 已定义且非零。我还想显示蓝色商品的费用(已定义运费但为零)，但不显示绿色商品的费用(未定义运费)。

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>

或使用安全导航运算符

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