Невозможно увеличить цену в зависимости от количества в приложении Ionic Ecommerce

Question

Я работаю над приложением Ionic Ecommerce и в этом я показываю количество товара на странице товаров. Проблема в том, что он не обновляет цену в зависимости от количества, и когда я увеличиваю количество одного продукта, количество всех продуктов увеличивается.

Это мой 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

Вы храните все количество продуктов в одном свойстве компонента. Вместо этого вам нужно сохранить количество для отдельного продукта и передать его методам увеличения и уменьшения:

Попробуйте следующее:

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

Answer 2

Похоже, в вашем пользовательском интерфейсе отображается product.product_actual_price. Но я не думаю, что вы обновляете продукт, а это означает, что новая цена не будет отображаться.

Кроме того, я предполагаю, что product_actual_price всегда должна быть ценой за 1 штуку, а не общей ценой. Так почему бы вам просто не обновить свой пользовательский интерфейс для отображения {{product.product_actual_price * productCount}}

EDIT:

У вас есть только одна переменная productCount, в которой хранится количество товаров. Вы должны отслеживать количество продуктов индивидуально (для каждого продукта). Таким образом, вы можете либо сохранить его на самом объекте продукта, либо создать карту, где вы храните productCount для каждого элемента.