如何使用 *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 错误：未捕获（承诺中）：TypeError：无法读取属性 未定义类型错误的“运输”：无法读取属性“运输”的 未定义

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>