时间戳

首页 > 解决方案 > 根据 Angular/Ionic 中的 Id 增加和减少项目数量

angular - 根据 Angular/Ionic 中的 Id 增加和减少项目数量

问题描述

我正在开发一个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);
    }
}

标签： angularionic3

解决方案

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

在这种情况下，您的产品数量不应显示为共同财产Itemquantity。每个产品的数量应该不同，并且应该是唯一的。例如，lstproduct.quantity（与您为每种不同产品显示不同价格的方式相同）。

同样，当您增加数量时，您可以在函数中传递对象 lstproduct 的唯一 id，并可以增加该特定对象的数量。我将向您展示如何使用 index.js 来做到这一点。

例如，

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

这样，只有调用此函数的产品的数量才会改变。

推荐阅读