事件触发的多个元素，而不是一个在* ngFor

Question

在我Angular2程序，我已经得到了'视图'下面的代码：

<ul class="cart"> 
    <li *ngFor="let item of cartService.cart$ | async">//BehaviorSubject 
     <h3 class="title">{{item.title}}</h3> 
     <span class="descr">{{item.description}}</span> 

     <button (click)="decrQnt()">-</button> 

      <form action="#"> 
      <input type="text" maxlength="3" id="qnt" readonly="readonly" value="{{qnt}}"> 
      </form> 

      <button (click)="incrQnt()">+</button> 
    </li> 
</ul> 

在component.ts：

public qnt: number = 1; 

incrQnt(){ 
    this.qnt < 100 ? ++this.qnt : 0; 
} 

decrQnt(){ 
    this.qnt > 1 ? this.qnt-- : 0; 
} 

问题是，我的功能同时为我的视图中的所有元素工作* ngFor我当然需要增加/减少数量只有一个元素点击哪个按钮。

我试图通过“项目”作为参数来触发功能，但然后我不得不属性“项目”上型AppComponent不存在

在视图试图改变{{QNT}}到{{item.qnt}}，并获得无法读取的不确定

财产QNT我想这是因为使用BehaviorSubject的，因为item.description和item.title其他性能如通过JSON传递，而qnt在运行时被初始化。

但是现在该如何处理呢？

Answer 1

我希望每个项目AHS自己的qnt财产 你递增/递减功能也可以通过在你想要的操作中的各个item上

<button (click)="decrQnt(item)">-</button> 
<button (click)="incrQnt(item)">+</button> 


incrQnt(item){ 
    item.qnt < 100 ? ++item.qnt : 0; 
} 

decrQnt(item){ 
    item.qnt > 1 ? item.qnt-- : 0; 
}