Question

任何人都可以帮助如何增加和减少单个项目的分接价值？这是我的代码：

 <ion-item *ngFor="let item of product; let i = index">
    <ion-thumbnail item-start>
      <img src= "{{ item.product_image }}">
    </ion-thumbnail>
    <h2>{{ item.product_name}}</h2><br>
    <p> {{ item.product_desc}}</p>



    <button  item-end ion-button small (tap)="tapEventsub(i)">-</button>
    <p item-end> {{tap}} </p>
    <button  item-end ion-button small (tap)="tapEventadd(i)">+</button>

    <button ion-button  item-end small round>Add</button>
  </ion-item>

.ts文件代码是

tapEventadd(index:number) {
    this.tap++;
}

tapEventsub(index:number) {
    if (this.tap>0) {
        this.tap--;
    }
}

Answer 1

您需要将tap变量声明为数组，然后使用索引来递增或递减该索引处的值：

tap: Array<number>; //declare the tap variable as an array instead
...

tapEventadd(index:number) {
    this.tap[index]++;
}

tapEventsub(index:number) {
    if (this.tap[index]>0) {
        this.tap[index]--;
}

在模板中，更改tap变量以传入索引：

<p item-end> {{tap[i]}} </p>

Answer 2

在.html文件中，您可以让tapEventadd（）方法将item.name用作参数。示例：

tapEventadd(item.product_name)

在ts文件中，您遍历数组，如果名称相同，则增加或减少产品数量。

示例：

tapEventadd(item){
for(var i=0;i<this.tap.length;i++) {
  var product = this.tap[i];
  if(product.name==item) {
    product.quantity++;
  }
}

}

希望有帮助！：）

离子2中单个项目的分接值增加和减少

2 个答案: