Angular 4 * ngFür das aktuelle Element Wert zu erhöhen und zu verringern

Question

Ich mache eine kleine Anwendung in Angular 4, ich zeige eine Tabelle mit einigen Daten, ich möchte den aktuellen Wert erhöhen und verringern, indem Sie auf DecreaseVal() und IncreaseVal klicken() -Funktion, aber es ändert sich der gesamte Wert in der Schleife.

<tr class="rem1" *ngFor="let hero of heroes"> 
    <td class="invert"> 
    <div class="quantity"> 
     <div class="quantity-select"> 
      <div class="entry minus" (click)="DecreaseVal()">&nbsp</div> 
      <div class="entry value"><span>{{count}}</span></div> 
      <div class="entry plus" (click)="IncreaseVal()">&nbsp;</div> 
     </div> 
    </div> 
    </td> 
</tr> 

Dies ist meine Komponente

count=1; 
    DecreaseVal() 
    { 
    this.count=this.count>1?this.count-1:this.count; 
    } 
    IncreaseVal() 
    { 
    this.count=this.count<5?this.count+1:this.count; 
    } 

Answer 1

Es geschieht, weil Ihre count Variable ist global und gehört nicht zu den Hero Klasse. Sie müssen Sie Code auf folgende Weise optimieren:

neues Feld hero.class.ts in Deklarieren

count: number = 0;

Tweak Ihre Vorlage component.html

<tr class="rem1" *ngFor="let hero of heroes"> 
    <td class="invert"> 
    <div class="quantity"> 
     <div class="quantity-select"> 
      <div class="entry minus" (click)="DecreaseVal(hero)">&nbsp</div> 
      <div class="entry value"><span>{{hero.count}}</span></div> 
      <div class="entry plus" (click)="IncreaseVal(hero)">&nbsp;</div> 
     </div> 
    </div> 
    </td> 
</tr> 

Und jetzt in component.ts

DecreaseVal(hero: Hero) 
{ 
    if (hero.count > 1) { 
     hero.count--; 
    } 
} 

IncreaseVal(hero: Hero) 
{ 
    if (hero.count < 5) { 
     hero.count++; 
    } 
} 

UPD: Aktualisiert mit Vorschlägen und Notizen von Andrien Brunelat.

Answer 2

Es gibt zwei mögliche Lösungen für Ihr Problem. Zuallererst wird es alle Werte erhöhen, weil es die gleiche Variable für alle Elemente ist, die Sie durchlaufen. Die erste und schnellste Lösung besteht darin, diese Anzahl zu deinem Heldenobjekt in deinem Heldenfeld hinzuzufügen. So etwas wie

heroes = [{heroName:'example', count : 0}, {heroName:'other', count : 0}];

Dann in Ihrem Fall, Sie haben den Index senden das Verfahren zu machen wissen, wo zu erhöhen.

(click)="IncreaseVal(i)"

In Ihrer Komponente, dann müssen Sie den Zähler des Objekts erhöhen.

IncreaseVal(index){ this.heroes[index].count++; }

Die andere Lösung ist eine untergeordnete Komponente für Helden zu erstellen. Es wird die vollständige td und den Gegenwert haben.