Question

我正在使用Ionic电子商务应用程序，因此，我正在产品页面中显示产品数量。问题在于它不是根据数量更新价格，而当我增加一种产品的数量时，所有产品的数量都在增加。

这是我的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>

在这种情况下，我正在提取所有产品。

这是我的 productdetails.ts ：

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 = this.productCount * parseInt(detailsp.product_actual_price);
    let cartProduct = {
      product_id: detailsp.id,
      name: detailsp.product_name,
      image: detailsp.image,
      count: this.productCount,
      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() {
    if (this.productCount > 1) {
      this.productCount--;
    }
  }

  incrementProductCount() {
    this.productCount++;
  }
}

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

Answer 1

在用户界面中，您似乎显示product.product_actual_price。但是我不认为您要更新产品，这意味着不会显示新价格。

我还假设product_actual_price应该始终是1件的价格，而不是总价格。那么，为什么不更新UI以显示{{product.product_actual_price * productCount}}

编辑：

您只有一个用于存储产品计数的变量productCount。您必须单独跟踪每个产品的产品计数。因此，您既可以将其存储在产品对象本身上，也可以创建一个用于存储每个项目的productCount的地图。

Answer 2

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

尝试以下操作：

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

和组件更改：

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++;
  }
}

无法在Ionic Ecommerce App中根据数量增加价格

2 个答案: