角度4 in * ngFor合計値の合計を計算する

Question

角度4で少しのアプリケーションを作成しています。 * ngforを反復するときの合計値の合計を表示します。

HTMLコード

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