每个产品的 Ionic 2 增量减量

Posted 2023-03-13

【中文标题】每个产品的 Ionic 2 增量减量

【英文标题】：Ionic 2 increment decrement quantity for each product

【发布时间】：2018-01-29 20:30:06

【问题描述】：

所以我想为每个产品输入数量，但是每次我点击增加按钮时，其他产品也会增加，我如何增加产品的数量而不影响其他产品？另外，我想通过数量乘以价格来计算应付金额，我该怎么做？

[![enter image description here][2]][2]

【问题讨论】：

您正在对所有产品使用一个通用/单个变量“currentNumber”。为每个产品使用单独的变量“currentNumber”，例如“product.PCode”

product.PPrice * currentNumber

下次请添加实际代码而不是它的图像，这样更容易将其包含在答案中:)

【参考方案1】：

在你的组件代码中，首先为productlist中的每个product初始化一个quantity属性

// After getting the list of products...
this.productlist.foreach(product =>  product.quantity = 0; );
// ...

同时更新decrement 和increment 函数以接收应修改的product：

increment(product: any) 
  product.quantity++;


decrement(product: any) 
  if(product.quantity > 0) 
    product.quantity--;
  

现在在视图中，您可以使用新的quantity 属性来显示数量乘以价格。另请注意，现在我们将product 发送到increment 和decrement 函数：

<ion-icon ... (click)="decrement(product)"></ion-icon>
 product.quantity * product.PPrice 
<ion-icon ... (click)="increment(product)"></ion-icon>

【讨论】：

为什么 product.quantity 的值为 NaN ？我该如何解决？

你有没有在组件代码中添加这行代码，一拿到产品列表就立马？ this.productlist.foreach(product => product.quantity = 0; );

@sebaferreras 我只有一个组件来计算数量，但是当我增加和减少 quantity 时，它不会在视图中更新，除非我在 UI 中进行一些随机点击任何猜测?

能否请您看一下this answer，看看NgZone 是否有助于Angular 检测到需要更新的视图？ @FernandoZamperin

嗨@sebaferreras 我看到一篇解释 NgZone 的文章，是的，你说得对，非常感谢！！

【参考方案2】：

<ion-card *ngFor="let product of cart; let index=index">

<strong> ₹  item_qty *  product.price  </strong>

<ion-card>


import  Component, OnInit  from '@angular/core';
import   NavController, NavParams  from 'ionic-angular';

@Component(
selector: 'page-cart',
templateUrl: 'cart.html',
)
export class CartPage implements OnInit 

 item_qty:any;

constructor()
this.item_qty=1;

// increment item 
inc()
this.item_qty += 1;
console.log(this.item_qty + 1);


//decrements item

dec()
if(this.item_qty-1 < 1)
  this.item_qty = 1;
  console.log('item_1->' + this.item_qty)

else
  this.item_qty -= 1;
  console.log('item_2->' + this.item_qty);