如何在Angular2中的ngFor指令中缓存值？

Question

我的组件具有activity属性，该属性具有计算大量数字的totalLoad（）方法，但如果参数错误，也可以返回null（否则返回包含＆＃39; load＆＃39;的结构）。 在ngFor中，当且仅当方法不返回null时，我才想访问加载属性。 你会怎么做？

<td *ngFor="let d of monthDays">
    {{activity.totalLoad(member.code, d.day).load}} h
</td>

Answer 1

我从您的问题中假设您在尝试访问某些属性时试图避免模板错误，对吧？

如果我是对的，你可以使用Safe Navigation Operator：

来完成

<td *ngFor="let d of monthDays">
    {{activity.totalLoad(member.code, d.day)?.load}} h
</td>

使用运算符检查一个简单的演示：

PLUNKER

Answer 2

在视图中以这种方式绑定到方法通常是个坏主意。 每次Angular运行更改检测时，都会执行此方法。

更好的方法是将计算值存储在数组中，并在此数组上使用ngFor。

ngOnInit() {
  this.totalLoads = this.monthDays
  .map(md => this.activity.totalLoad(this.member.code, md.day).load);
}

<td *ngFor="let td of totalLoads">
    {{td}} h
</td>

Answer 3

我终于这样做了（这是上面两个答案的结合）：

在component.ts中：

ngOnInit() {
  this.totalLoads = this.monthDays
  .map(md => this.activity.totalLoad(this.member.code, md.day).load);
}

在component.html中：

<td *ngFor="let td of totalLoads">
    {{td ? td+" h":""}}
</td>