Как кэшировать значение в директиве ngFor в Angular2?

Question

У моего компонента есть свойство Activity, которое имеет метод totalLoad(), который вычисляет обширные числа, но может также возвращать ноль, если параметры неверны (в противном случае возвращает структуру, содержащую "нагрузку"). В ngFor я хотел бы получить доступ к свойствам загрузки тогда и только тогда, когда метод не возвращает ноль. Как бы Вы это сделали?

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