Количество элемента приращения и уменьшения на основе Id в угловых / ионных

Question

Я работаю над приложением ionic для электронной коммерции. У меня есть проблема: когда я увеличиваю или уменьшаю элемент «carted», он увеличивает или уменьшает все остальные элементы. Я не знаю, как решить эту проблему.

<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>

.ts код файла:

addItem(value: any) {
    const initialvalue = 0;
    if (value != null) {
        const afterclick = value + 1;
        return (this.Itemquantity = afterclick);
    }
    else {
        return (this.Itemquantity = initialvalue + 1);
    }
}

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

Answer 1

Я предполагаю, что lstproductdetail - это имя массива всех продуктов, а lstproduct - как вы отображаете данные одного продукта.

В этом случае количество вашего продукта не должно отображаться как общее свойство Itemquantity. Количество должно отличаться и должно быть уникальным для каждого продукта. Например, lstproduct.quantity (так же, как вы показываете разную цену для каждого отдельного продукта).

Аналогично, когда вы увеличите количество, вы можете передать уникальный идентификатор объекта lstproduct в функциии может увеличивать количество этого конкретного объекта. Я собираюсь показать вам, как это сделать с индексом.

Например,

В 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); 
    } 
} 

Таким образом, количество будет меняться только для продукта, для которого эта функция вызывается.