Question

我在Angular 4中做了一点申请，我希望在迭代* ngfor时显示总值的总和。

HTML CODE

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

COMPONENT

 total:number;
 heroes: Hero[];
 ngOnInit():void 
 {
 this.heroService.getnewHeroes()
 .then(heroes => {this.heroes = heroes});
 }

SERVICE

 getnewHeroes(): Promise<Hero[]> 
  {
     return this.http.get('api/heroes').toPromise()
     .then(response => response.json().data as Hero[])
  }

我想要输出如下

abc 500 * 2

xyz 200 * 5

总计2000

Answer 1

计算Component中的总数并将其分配给新属性。不要试图在ngFor循环中进行总和计算，这不是它的设计目的。
在ngFor。
您还要在要重复的元素上使用*ngFor，在这种情况下为li。如果你把它放在ul上，那么你将为每个英雄创建一个新的无序列表，而不是新的列表项里面然后是无序列表标记。

组件代码：

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>

Angular 4 in * ngFor计算总值的总和

1 个答案: