Question

我在Angular 4中做了一个小应用程序，我显示了一个包含一些数据的表，我想通过单击DecreaseVal（）和IncreaseVal（）函数来增加和减少当前值，但是它会改变循环中的所有值。

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

这是我的组件

 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

这是因为您的count变量是全局的，不属于Hero类。您需要通过以下方式调整代码：

声明新字段的 hero.class.ts

count: number = 0;

调整模板 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)"> </div> </div> </div> </td> </tr>

现在在 component.ts

DecreaseVal(hero: Hero) { if (hero.count > 1) { hero.count--; } } IncreaseVal(hero: Hero) { if (hero.count < 5) { hero.count++; } }

UPD：更新了Andrien Brunelat的建议和笔记。

Answer 2

您的问题有两种可能的解决方案。首先，它会增加所有值，因为对于您正在迭代的所有元素，它是相同的变量。第一个快速解决方案是将该计数添加到英雄数组中的heroe对象。像

这样的东西

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

然后，在您的事件中，您必须发送索引以使该方法知道增加的位置。

(click)="IncreaseVal(i)"

在你的组件中，你必须增加该对象的计数器。

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

另一个解决方案是为英雄创建一个子组件。它将具有完成的td和计数器。

Angular 4 * ng对于当前元素值的增加和减少

2 个答案: