检查组件中定义的数据

Question

假设我的组件有配置项。如果它们可用，它们应该在输出中 - 否则不。

cfg = { name: "sam", address: "NY", age: 51 };
...
<p *ngIf="cfg.name != undefined">{{cfg.name}}</p>
<p *ngIf="cfg.address != undefined">{{cfg.address}}</p>
<p *ngIf="cfg.age != undefined">{{cfg.age}}</p>

如果有很多项，对 defined 的检查会很烦人。

有没有更好的方法？

Answer 1

您可以使用安全导航运算符（也称为可选链接）

<p>{{cfg?.name}}</p>
<p>{{cfg?.address}}</p>
<p>{{cfg?.age}}</p>

另一种选择是创建一个包装 ng-container 并在其上应用 *ngIf。

<ng-container *ngIf="cfg">
  <p>{{cfg.name}}</p>
  <p>{{cfg.address}}</p>
  <p>{{cfg.age}}</p>
</ng-container>

检查组件中定义的数据

Checks for defined data in component

html

javascript

ecmascript-6

angular