Question

在我的Angular2应用中，我有以下代码'view'：

<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 创建的所有元素起作用。当然，我需要增加/减少单击该按钮的一个元素的数量。

我试图将'item'作为参数传递给触发器函数，但后来我在AppComponent

上有属性'item'不存在
在视图中尝试将{{qnt}}更改为{{item.qnt}}并获取无法读取未定义的属性qnt

我想这是因为使用了BehaviorSubject，因为其他属性如item.description和item.title是通过json传递的，而qnt是在运行时初始化的。

但现在该怎么处理？

Answer 1

我希望每个项目都是自己的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;
 }

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

1 个答案: