Angular 4 in * ngZur Berechnung der Summe des Gesamtwerts

Question

Ich mache eine kleine Anwendung in Angular 4, Ich möchte die Summe des Gesamtwerts anzeigen, wenn ich durch * ngfor iteriere.

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[]) 
    } 

Ich möchte eine Ausgabe wie unten

abc 500 * 2

xyz 200 * 5

---

Insgesamt 2000

Answer 1

• Berechnen Sie Ihre Gesamt im Component und weisen Sie auf eine neue Eigenschaft. Versuchen Sie nicht, die Summenberechnung innerhalb der ngFor-Schleife durchzuführen, für die sie nicht vorgesehen ist.
• Anzeige der Summe außerhalb der ngFor.
• Verwenden Sie auch *ngFor für das Element, das Sie wiederholen möchten, li in diesem Fall. Wenn Sie es auf ul setzen, dann erstellen Sie eine neue ungeordnete Liste für jeden Helden anstelle eines neuen Listenelements innerhalb dann ungeordneten Liste Tag.

Komponentencode:

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

Template Code:

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