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>

它没有用。

错误错误：未捕获（在承诺中）：TypeError：无法读取属性＆＃39;航运＆＃39;未定义的TypeError：无法读取属性＆＃39; shipping＆＃39;的未定义

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>

如何使用* ngIf测试变量是否定义离子2

1 个答案: