Angulaire 2: Calculer la somme d'un élément dans ngFor

Je suis en train de calculer le total (somme des montants) en dehors de la ngFor.

HTML

 <div *ngFor="let item of items">
    <input type="text" [(ngModel)]="item.price">  
    <input type="text" [(ngModel)]="item.quantity" (ngModelChange)="item.amount=item.quantity*item.price">
    <input type="text" [(ngModel)]="item.amount">    
</div>
<input type="text" [(ngModel)]="totalAmount">

Scripe

getTotal() {
    let total = 0;
    for (var i = 0; i < this.items.length; i++) {
        if (this.items[i].amount) {
            total += this.items[i].amount;
            this.totalamount = total;
        }
    }
    return total;
}

Quand je l'appelle la getTotal() la fonction renvoie total. Mais,comment puis-je appeler que dans la zone de texte? ou toute autre méthode.

Quelqu'un peut-il m'aider comment résoudre ce problème.

  • Calcul de la somme dans le modèle (items) à la place et se lient à la suite.
  • Merci pour la réponse. Je suis l'ajout de éléments de manière dynamique à partir de l'INTERFACE utilisateur. Donc, je ne suis pas capable de calculer.
InformationsquelleAutor NNR | 2016-10-03
  1. 4

    Vous pouvez toujours lier à la fonction de votre modèle à l'aide d'un moyen de lier {{ }}

    Dans votre code si vous voulais appeler votre fonction et le lier directement à votre point de vue vous feriez tel:

    <input type="text" value='{{ getTotal() }}' />

    InformationsquelleAutor Nico
  2. 0

    Je pense Angulaire besoin de quelque chose de plus intrinsèque pour atteindre cet objectif. Le {{éléments}} ci-dessus est tout simplement un tableau et les choses sont simples. Si c'était un fait observable, alors vous serez en vous abonnant à elle dans le modèle et dans la classe. Si l'observable est filtré dans le ngFor, alors vous devez répéter le filtrage dans la méthode de classe.

    Du mieux que je peux venir avec un tuyau:

    <div *ngFor="let item of items$ | async as list">
</div>
<div>{{list.reduce((acc,val) => acc + val.amount, 0)}}</div>

    Je ne peux pas imaginer pourquoi vous devriez vous voulez lier la somme calculée pour un champ de saisie, alors j'ai juste affiché la valeur ici.

    Malheureusement, cela signifie toujours en boucle la liste deux fois.

    InformationsquelleAutor Alex