角度 – 当购物车中的产品数量增加时,总价格不会更新在Ionic Eco

这是我的cart.html：

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Your Cart
    </ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
  <ion-list *ngFor="let itm of cartItems" class="myitem11">
    <ion-item>
      <ion-thumbnail item-start >
        <img src="{{itm.image}}">
      </ion-thumbnail>
      <h2>{{itm.name}}</h2>
      <p>Actual Price:
        <span [ngStyle]="itm?.discountp === '0' ? {'text-decoration':'none'} : {'text-decoration':'line-through'}">
          ?{{itm.disprice * itm.count}}
        </span>
      </p>
      <p>Discount: {{itm?.discountp}}%</p>
      <ion-row class="item-count">
        <ion-col class="qty">
            <button (click)="decreaseProductCount(itm)" clear ion-button small color="dark" class="mewbtn11">
              -
            </button>
            <button ion-button small clear color="dark" class="mewbtn11">
              {{itm?.count}}
            </button>
            <button (click)="incrementProductCount(itm)" clear ion-button small color="dark" class="mewbtn11">
              +
            </button>
        </ion-col>
      </ion-row>
      <p>Discounted Price: ?{{itm.productPrice * itm.count}}</p>
      <button ion-button icon-only clear item-end (click)="removeItem(itm)"><ion-icon class="mycaicon11" name="ios-trash-outline"></ion-icon></button>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer class="single-footer" ngif="!isEmptyCart">

  <ion-grid>
    <ion-row>
      <ion-col class="addCart" (click)="checkpage()">
        <button color="secondary" full="" ion-button="" round="true">
          {{totalAmount}} Checkout
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-footer>

这是我的购物车：

import { CheckoutPage } from './../checkout/checkout';
import { Component } from '@angular/core';
import { IonicPage,NavController,NavParams,LoadingController,AlertController } from 'ionic-angular';
import { CartProvider } from "../../providers/cart/cart";


@IonicPage()
@Component({
  selector: 'page-cart',templateUrl: 'cart.html',})
export class CartPage {
 cartItems: any[] = [];
 totalAmount: number = 0;
 isCartItemLoaded: boolean = false;
 isEmptyCart: boolean = true;
 productCount: number = 1;
  constructor(public navCtrl: NavController,public navParams: NavParams,private cartService: CartProvider,public loadingCtrl: LoadingController,private alertCtrl: AlertController,private cdr: ChangeDetectorRef) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CartPage');
    this.cartService.getCartItems().then((val) => {
      this.cartItems = val;
      console.log(val);
    });
    this.loadCartItems();
  }

  loadCartItems() {
    let loader = this.loadingCtrl.create({
      content: "Wait.."
    });
    loader.present();
    this.cartService
      .getCartItems()
      .then(val => {
        this.cartItems = val;
        if (this.cartItems.length > 0) {
          this.cartItems.forEach((v,indx) => {
            this.totalAmount += parseInt(v.totalPrice);
            console.log(this.totalAmount);
          });
          this.cdr.detectChanges();
          this.isEmptyCart = false;
        }

        this.isCartItemLoaded = true;
        loader.dismiss();
      })
      .catch(err => {});
  }

  removeItem(itm) {
    let alert = this.alertCtrl.create({
      title: 'Remove Product',message: 'Do you want to remove this product?',buttons: [
        {
          text: 'Cancel',role: 'cancel',handler: () => {
            console.log('Cancel Clicked');
          }
        },{
          text: 'Yes',handler: () => {
            this.cartService.removeFromCart(itm).then(() => {
              this.loadCartItems();
            });
          }
        }
      ]
    });
    alert.present();
  }

  checkpage()
  {
    this.navCtrl.push(CheckoutPage);
  }

  decreaseProductCount(itm) {
    if (itm.count > 1) {
      itm.count--;
      this.cdr.detectChanges(); 
    }
  }

  incrementProductCount(itm) {
    itm.count++;
    this.cdr.detectChanges();
  }

}

这是我的购物车服务：提供商>购物车> cart.ts：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

const CART_KEY = 'cartItems';

@Injectable()
export class CartProvider {

  constructor(public http: HttpClient,public storage: Storage) {
    console.log('Hello CartProvider Provider');
  }

  addToCart(productdet) {
    return this.getCartItems().then(result => {
      if (result) {
        if (!this.containsObject(productdet,result)) {
          result.push(productdet);
          return this.storage.set(CART_KEY,result);
        } else {
          let index = result.findIndex(x => x.product_id == productdet.product_id);
          let prevQuantity = parseInt(result[index].count);
          productdet.count = (prevQuantity + productdet.count);
          let currentPrice = (parseInt(productdet.totalPrice));
          productdet.totalPrice = currentPrice;
          result.splice(index,1);
          result.push(productdet);
          return this.storage.set(CART_KEY,result);
        }

      } else {
        return this.storage.set(CART_KEY,[productdet]);
      }
    })
  }

  removeFromCart(productdet) {
    return this.getCartItems().then(result => {
      if (result) {
        var productIndex = result.indexOf(productdet);
        result.splice(productIndex,1);
        return this.storage.set(CART_KEY,result);
      }
    })
  }

  removeAllCartItems() {
    return this.storage.remove(CART_KEY).then(res => {
      return res;
    });
  }


  containsObject(obj,list): boolean {
    if (!list.length) {
      return false;
    }

    if (obj == null) {
      return false;
    }
    var i;
    for (i = 0; i < list.length; i++) {
      if (list[i].product_id == obj.product_id) {
        return true;
      }
    }
    return false;
  }

  getCartItems() {
    return this.storage.get(CART_KEY);
  }
}

问题在于,当我增加购物车页面中的数量时,它不会更新总价格,而且在删除产品时也会发生这种情况.这是我购物车页面的演示.这是产品的原始价格,这就是为什么它无法更新总价格.我想从购物车产品中获取总价格,当产品数量增加时,它会更新价格,当产品被移除时,它将更新价格.任何帮助深表感谢.