Я обновляю свой ответ после более тщательного прохождения кода (изначально я подозревал проблемы с обнаружением изменений, но на самом деле я думаю, что проблема заключается в том, как обрабатывается переменная totalAmount).
Если мы последуем вашему коду и посмотрим, что изменится totalAmount var:
- сначала он устанавливается в 0 в cart.ts
- затем он обновляется каждый раз, когда вызывается метод loadCartItems () в cart.ts, где этот метод извлекает данные из персистентности (Ionic Storage)
Так что, естественно, когда вы обновляете количество в следующих методах:
decreaseProductCount(itm) {
if (itm.count > 1) {
itm.count--;
}
}
incrementProductCount(itm) {
itm.count++;
}
Это totalAmount не обновляется, так как вы не выполняете никакого кода для этого. Чтобы обновить totalAmount как часть этих методов, я бы предложил добавить этот метод:
recalculateTotalAmount() {
let newTotalAmount = 0;
this.cartItems.forEach( cartItem => {
newTotalAmount += (cartItem.productPrice * cartItem.count)
});
this.totalAmount = newTotalAmount;
}
Теперь вы можете обновить итоговую цену следующими способами:
decreaseProductCount(itm) {
if (itm.count > 1) {
itm.count--;
this.recalculateTotalAmount();
}
}
incrementProductCount(itm) {
itm.count++;
this.recalculateTotalAmount();
}
ОБНОВЛЕНИЕ:
Также теперь для решения проблемы, о которой вы упоминали в комментариях («удалить продукт из корзины, он не обновляет общую цену, а когда я добавил продукт со страницы продукта с количеством 2, в корзине отображается цена». только для количества 1, и после нажатия кнопки количества в корзине обновляется цена. ") в ваших 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.isEmptyCart = false;
this.recalculateTotalAmount();
}
this.isCartItemLoaded = true;
loader.dismiss();
})
.catch(err => {});
}
PS: я также заметил, что в этом методе у вас два одинаковых вызова персистентности:
ionViewDidLoad() {
console.log('ionViewDidLoad CartPage');
// I would remove the commented below as your method below does the same work
//this.cartService.getCartItems().then((val) => {
//this.cartItems = val;
//console.log(val);
//});
this.loadCartItems();
}
Я думаю, вам следует удалить первый вызов, так как loadCartItems в основном выполняет ту же работу.
UPDATE2:
Здесь, в методе removeItem, вы вызываете removeFromCart, который возвращает обещания в последовательности, в то время как вы вызываете loadCartItems после первого. Чтобы исправить это, вы можете объединить две асинхронные операции в одно обещание.
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();
}
Переработано в провайдере:
removeFromCart(productdet) {
return new Promise((resolve,reject) => {
this.getCartItems().then(result => {
if (result) {
var productIndex = result.indexOf(productdet);
result.splice(productIndex, 1);
this.storage.set(CART_KEY, result).then(()=>{ resolve() })
}
})
})
PSS: Я также чувствую, что хранить корзину в постоянном порядке - это хорошо, но в вашем случае она становится источником правды для вашей корзины. Возможно, лучше всего хранить все данные корзины в памяти и только лениво сохранять данные в Ionic Storage.