Html 无法在Ionic电子商务应用程序中根据数量提高价格

我正在开发Ionic电子商务应用程序，在产品页面中显示产品数量。问题是它没有根据数量更新价格，当我增加一个产品的数量时，所有产品的数量都在增加

这是my productdetails.html：

<ion-header>
  <ion-navbar>
    <ion-title>Products</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-row align-items-center justify-content-center class="mynewr11">
 <ion-col *ngFor="let product of this.pdeta" col-5 class="mynewcol22">
  <img class="myimg11" src="{{product.image}}" />
  <p>{{ product.product_name }}</p>
  <p><strong>Price:</strong> ₹{{ product.product_actual_price }}</p>
  <ion-col class="qty">
    <button (click)="decreaseProductCount()" clear ion-button small color="dark">
      -
    </button>
    <button ion-button small clear color="dark">
      {{productCount}}
    </button>
    <button (click)="incrementProductCount()" clear ion-button small color="dark">
      +
    </button>
</ion-col>
  <button class="mybtn11" (click)="addToCart(product)" ion-button icon-left small>
    <ion-icon name="add"></ion-icon>
    Add to Cart
  </button>
 </ion-col>
</ion-row>
</ion-content>

---

当我增加一种产品的数量时，它会增加所有产品的数量，并且价格也不会更新。此外，我无法从addToCart函数获取产品详细信息。非常感谢您的帮助。

在您的用户界面中，您可以显示

产品。产品\u实际价格

。但我不认为你正在更新产品，这意味着新的价格将不会显示

另外，我假设

产品\实际\价格

应该始终是1件的价格，而不是总价。那么，为什么不更新UI以显示

{{product.product\u实际价格*productCount}

编辑：

---

您只有一个存储产品计数的变量

productCount

。您必须单独跟踪产品数量（每个产品）。因此，您可以将其存储在产品对象本身上，也可以创建一个映射，在其中存储每个项目的productCount。

它看起来像是在您的UI中显示

产品。产品\u实际\u价格

。但我不认为你正在更新产品，这意味着新的价格将不会显示

另外，我假设

产品\实际\价格

应该始终是1件的价格，而不是总价。那么，为什么不更新UI以显示

{{product.product\u实际价格*productCount}

编辑：

---

您只有一个存储产品计数的变量

productCount

。您必须单独跟踪产品数量（每个产品）。因此，您可以将其存储在product对象本身上，也可以创建一个映射，在其中存储每个项目的productCount。

您将所有产品数量存储在组件的单个属性中。相反，您需要保留单个产品的数量，并将其传递给增加和减少方法：

尝试以下方法：

    <ion-header>
  <ion-navbar>
    <ion-title>Products</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-row align-items-center justify-content-center class="mynewr11">
 <ion-col *ngFor="let product of this.pdeta" col-5 class="mynewcol22">
  <img class="myimg11" src="{{product.image}}" />
  <p>{{ product.product_name }}</p>
  <p><strong>Price:</strong> ₹{{ product.product_actual_price }}</p>
  <ion-col class="qty">
    <button (click)="decreaseProductCount(product)" clear ion-button small color="dark">
      -
    </button>
    <button ion-button small clear color="dark">
      {{product.count}}
    </button>
    <button (click)="incrementProductCount(product)" clear ion-button small color="dark">
      +
    </button>
</ion-col>
  <button class="mybtn11" (click)="addToCart(product)" ion-button icon-left small>
    <ion-icon name="add"></ion-icon>
    Add to Cart
  </button>
 </ion-col>
</ion-row>
</ion-content>

---

您正在组件的单个属性中存储所有产品数量。相反，您需要保留单个产品的数量，并将其传递给增加和减少方法：

尝试以下方法：

    <ion-header>
  <ion-navbar>
    <ion-title>Products</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-row align-items-center justify-content-center class="mynewr11">
 <ion-col *ngFor="let product of this.pdeta" col-5 class="mynewcol22">
  <img class="myimg11" src="{{product.image}}" />
  <p>{{ product.product_name }}</p>
  <p><strong>Price:</strong> ₹{{ product.product_actual_price }}</p>
  <ion-col class="qty">
    <button (click)="decreaseProductCount(product)" clear ion-button small color="dark">
      -
    </button>
    <button ion-button small clear color="dark">
      {{product.count}}
    </button>
    <button (click)="incrementProductCount(product)" clear ion-button small color="dark">
      +
    </button>
</ion-col>
  <button class="mybtn11" (click)="addToCart(product)" ion-button icon-left small>
    <ion-icon name="add"></ion-icon>
    Add to Cart
  </button>
 </ion-col>
</ion-row>
</ion-content>

---

谢谢你的回答。现在我的价格正在更新，但我提到了一个问题，当我点击一个产品数量时，所有产品数量都在增加或减少。谢谢你的回答，谢谢你的回答。现在我的价格正在更新，但我提到了一个问题，当我点击一个产品数量时，所有产品数量都在增加或减少。你能帮个忙吗？谢谢你的回答。不要增加或减少。现在，加号按钮不起作用。无法更新此行：{{product.count}}单击加号按钮时显示NAN。count:detailsp.count，这应该是productCount或only count。您的解决方案是正确的，但*ngFor=“let product of this.pdeta”，this.pdeta不包含count。我们必须从addToCart（detailsp）函数获取它。这就是它产生问题的原因。产品的初始计数应设置为“0”。更新了一次答案检查。您还可以将获取产品的位置设置为“0”。不增加或减少。现在，加号按钮不起作用。无法更新此行：{{product.count}}单击加号按钮时显示NAN。count:detailsp.count，这应该是productCount或only count。您的解决方案是正确的，但*ngFor=“let product of this.pdeta”，this.pdeta不包含count。我们必须从addToCart（detailsp）函数获取它。这就是它产生问题的原因。产品的初始计数应设置为“0”。更新了一次答案检查。您还可以将获取产品的位置设置为“0”。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { CartProvider } from '../../providers/cart/cart';
import { CartPage } from '../cart/cart';

@IonicPage()
@Component({
  selector: 'page-productdetails',
  templateUrl: 'productdetails.html',
})
export class ProductdetailsPage {
  detailsp: any = [];
  pdeta: any = [];
  items: Object[] = [];
  itemsInCart: Object[] = [];
  selectProduct: any;
  totalPrice: any;
  productCount: number = 1;
  cartItems: any[];
  constructor(public navCtrl: NavController, public navParams: NavParams, private cartService: CartProvider, public toastCtrl: ToastController) {
    this.detailsp = this.navParams.get('productdet');
    this.pdeta = this.detailsp.msg;
    console.log(this.detailsp);
    if (this.navParams.get("productdet")) {
      window.localStorage.setItem('ProductdetailsPage', JSON.stringify(this.navParams.get("productdet")));
    }

  }

  ionViewDidEnter(){
    this.getSingleProduct();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProductdetailsPage');
    this.selectProduct = this.navParams.get("productdet");
    this.cartService.getCartItems().then((val) => {
      this.cartItems = val;
    })
  }

  getSingleProduct() {
    if (window.localStorage.getItem('productdet') != 'undefined') {
      this.selectProduct = JSON.parse(window.localStorage.getItem('productdet'))
    }
  }

  addToCart(detailsp) {
    var productPrice = detailsp.count * parseInt(detailsp.product_actual_price);
    let cartProduct = {
      product_id: detailsp.id,
      name: detailsp.product_name,
      image: detailsp.image,
      count: detailsp.count,
      productPrice: this.productCount * parseInt(detailsp.product_actual_price),
      totalPrice: productPrice,
    };
    console.log(cartProduct);
    this.cartService.addToCart(cartProduct).then((val) => {
      this.presentToast(cartProduct.name);
    });
  }

  presentToast(name: any) {
    let toast = this.toastCtrl.create({
      message: `${name} has been added to cart`,
      showCloseButton: true,
      closeButtonText: 'View Cart'
    });

    toast.onDidDismiss(() => {
      this.navCtrl.push(CartPage);
    });
    toast.present();
  }

  decreaseProductCount(product) {
    if(typeof product.count === 'undefined') {
       product.count = 0;
    }
    if (product.count > 1) {
      product.count--;
    }
  }

  incrementProductCount(product) {
    if(typeof product.count === 'undefined') {
       product.count = 0;
    }
    product.count++;
  }
}