Question

<p><b>Qty :</b>
    <ion-icon name="remove-circle" (click)="decrement()"></ion-icon>
      {{cart.qty}}
    <ion-icon name="add-circle" (click)="increment()"></ion-icon>
 </p>

这是cart.ts代码

ionViewDidLoad() {
        var param = "user_id=" + this.user_id;
        this.UtilsService.makeAPICall(this.UtilsService.postMethod, 
          this.UtilsService.CartItemAPI, param, (response) => {
          if(response.data)
          { 
            this.Data = response["data"];
            this.Qty = response["qty"];
            localStorage.setItem("qty", this.Qty);
          }  
        });
      }

该代码中的+和-数量如何？

Answer 1

有很多方法可以做到这一点，但是由于您将数量保存在localStorage中，因此有一种方法可以做到这一点。因此，在您的.ts文件中，您将拥有

decrement = () => {
  // you don't want it to decrement to lower than 0
  if (this.Qty > 0 ) {
    this.Qty -= 1;
    localStorage.setItem("qty", this.Qty);
  }
}

increment = () => {
  this.Qty += 1;
  localStorage.setItem("qty", this.Qty);
}

此外，您无法使用{{cart.qty}}访问它，而需要使用{{Qty}}。

如果您不需要一直将其保存在localStorage中，则可以在HTML中内联

<p><b>Qty :</b>
  <!-- checking if it's 0 before removing 1 from the total quantity -->
  <ion-icon name="remove-circle" (click)="Qty = Qty > 0 ? Qty - 1 : Qty"></ion-icon>
      {{Qty}}
  <ion-icon name="add-circle" (click)="Qty += 1"></ion-icon>
</p>

希望这会有所帮助。

离子2中如何动态地增加+和-？

1 个答案: