1

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

我试图将“item”作为参数传递给触发函数，但后来我的属性“item”在 AppComponent 类型上不存在

在视图中尝试将 {{qnt}} 更改为 {{item.qnt}} 并得到Can't read property qnt of undefined

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

但是现在该怎么处理呢？

4

1 回答 1

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;
 }
于 2017-02-14T06:14:18.000 回答