基于角度/离子的Id的增减项目数量

Question

[！[是] [1]] [1]我正在从事离子电晕应用。当我增加或减少所有其他项目时，我有问题。我不知道该如何解决。

<ion-content class="bg-color">
  <ion-list no-lines>
    <ion-item *ngFor="let lstproduct of lstproductdetail">
      <ion-avatar item-start>
        <img src="{{ lstproduct.image_url }}" />
      </ion-avatar>
      <h3>{{ lstproduct.name }}</h3>
      <p class="d-flex">
        Exp. Delivery by Sun, June 11
        <span class="end">{{ lstproduct.price }}</span>
      </p>
          <div class="quantity control-group123">
              <label class="required">Quantity</label>
            <input value="-"  (click)="decrementItem(Itemquantity)" 
         readonly="readonly" class="uk-input tm-quantity-input quantity-change"
          style="width: 35px; border-radius: 3px 0px 0px 3px;">
         <input  value="{{Itemquantity}}"  readonly="readonly" 
         class="uk-input tm-quantity-input quantity-change"
         style="width: 60px; position: relative; margin-left: -4px; margin-right: -4px; border-right: none; 
         border-left: none; border-radius: 0px;">
        <input value="+" (click)="addItem(Itemquantity)" 
         readonly="readonly" class="uk-input tm-quantity-input quantity-change" 
         style="width: 35px; padding: 0px 12px; 
         border-radius: 0px 3px 3px 0px;">
         </div>
          <div style="margin-left: 75px">
              <button ion-button  class="btn shadow" (click)="removeitem(lstproduct.id)">
                  Remove Item <ion-icon name="trash"></ion-icon>
               </button>
          </div>
    </ion-item>
  </ion-list>
</ion-content>```


  [1]: https://i.stack.imgur.com/tKPRN.jpg

Answer 1

[我假设lstproductdetail是所有产品的数组的名称，lstproduct是显示一个产品的数据的方式。

在这种情况下，您的产品数量不应显示为共同属性Itemquantity。每种产品的数量应有所不同且应唯一。例如，lstproduct.quantity（用相同的方式显示每种不同产品的不同价格）。

类似地，当您增加数量时，您可以在函数中传递对象lstproduct的唯一ID，并且可以增加该特定对象的数量。我将向您展示如何使用索引。

例如，

在HTML中：

更改-<ion-item *ngFor="let lstproduct of lstproductdetail; let i=index">

在TS中：

eaddItem(value: any, i) { 
     const initialvalue = 0; 
     if (value != null) { 
         const afterclick = value + 1; 
         return (this.lstproductdetail[i].Itemquantity = afterclick); 
     } 
     else { 
         return (this.lstproductdetail[i].Itemquantity = initialvalue + 1); 
     } 
} 

decrementItem(value: any, i) { 
    const initialvalue = 1; 
    if (value > 0) { 
        const afterclick = value - 1; 
        return (this.lstproductdetail[i].Itemquantity = afterclick); 
    } 
    else { 
        return (this.lstproductdetail[i].Itemquantity = initialvalue - 1); 
    } 
} 

这样，仅调用此功能的产品的数量将改变。