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

Question

My component has the activity property which has the totalLoad() method that computes extensive numbers, but could also return null if parameters are wrong ( otherwise return a structure containing 'load'). In an ngFor, I'd like to access to load properties if and only if the method doesn't return null. How would you do that?

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

Answer 1

I assumed from your question that you are trying to avoid template errors when trying to access some property, right?

If I'm right, you can do it using the Safe Navigation Operator :

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

Check a simple demo using the operator:

PLUNKER

Answer 2

Binding to a method this way in the view is usually a bad idea. Every time Angular runs change detection, this method is executed.

A better approach is to store the calculated values in an array and use ngFor on this array.

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

I finally did this (it's the union of the two answers above):

In the component.ts:

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

In the component.html:

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