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

  • Z时代
  • 2024-01-10
  • 分类：问答

我的组件具有activity属性，它具有计算大量数字的totalLoad（）方法，但如果参数错误则返回null（否则返回包含'load'的结构）。 在ngFor中，我想访问加载属性当且仅当方法不返回null。 你会怎么做？如何在Angular2的ngFor指令中缓存一个值？

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

回答：

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

如果我是正确的，你可以使用Safe Navigation Operator做到这一点：

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

检查一个简单的演示使用操作：

PLUNKER

回答：

绑定到一个方法这种方式在视图中通常是一个坏主意。 每次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>

回答：

我终于做到这一点（它的两个答案的上方工会）：

在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>

以上是 如何在Angular2的ngFor指令中缓存一个值？ 的全部内容， 来源链接： utcz.com/qa/261636.html

回到顶部