*ngFor 中的 Angular 4 计算总值之和

Question

<分区>

Answer 1

• 在 Component 中计算您的总数并将其分配给新属性。不要尝试在 ngFor 循环内进行求和计算，这不是它的设计目的。
• 显示 ngFor 之外的总数。
• 您还可以在要重复的元素上使用 *ngFor，在本例中为 li。如果你把它放在 ul 上，那么你将为每个英雄创建一个新的无序列表，而不是一个新的列表项 inside 然后是无序列表标签。

组件代码:

heroes: Hero[];
total: number;
ngAfterContentChecked()  {
    this.total = this.heroes.reduce(funtion(runningValue: number, hero: Hero)=> {
      runningValue = runningValue + (hero.price * hero.qty);
    }, 0);
}

模板代码:

<ul>
  <li *ngFor="let hero of heroes">{{hero.name}} <span>{{hero.price*hero.qty}}</span></li>
  <li>Total price <span>{{total}}</span></li>
</ul>