javascript - 无法计算购物车中的总数
问题描述
我正在创建一个简单的购物车应用程序,当用户添加多个相同产品时。我无法计算总数。
以下是我的逻辑,
产品数据结构,
product = {
'productName': 'Sample Product',
'productImage': productImage,
'rate': 100,
'quantity': 1
}
this.addToCartService.cartItems.subscribe(product => {
if (product) {
const productExistInCart = this.cartItems.find(({ productName }) => productName === product.productName);
if (!productExistInCart) {
this.cartItems.push(product);
return;
} else {
productExistInCart.quantity++
}
this.totalPrice = this.cartItems
.map(item => item.rate)
.reduce((prev, curr) => prev + curr, 0);
}
});
HTML
<div class="cart_box dropdown-menu dropdown-menu-right show">
<ul class="cart_list" *ngIf="cartItems.length">
<li *ngFor="let cartItem of cartItems; let i = index">
<a (click)="removeFromCart(i)" class="item_remove"><i class="ion-close"></i></a>
<a href="#"><img src="{{cartItem.productImage}}" alt="cart_thumb1">{{cartItem.productName}}</a>
<span class="cart_quantity"> {{cartItem.quantity}} x <span class="cart_amount"> <span
class="price_symbole">₹</span>{{cartItem.rate}}</span></span>
</li>
</ul>
<div class="cart_footer">
<p class="cart_total">Total: <span class="cart_amount"> <span
class="price_symbole">₹</span>{{totalPrice}}</span>
</p>
<p class="cart_buttons"><a href="cart.html" class="btn btn-default btn-radius view-cart">View Cart</a><a
href="checkout.html" class="btn btn-dark btn-radius checkout">Checkout</a></p>
</div>
</div>
我被困在这里,我不知道如何更新现有项目的总数。请帮忙。
当前输出为
根据上图,总数应为 400。但显示为 100。
解决方案
问题是你在quantity
计算总价时没有考虑到。要解决此问题,请尝试以下操作:
this.totalPrice = (this.cartItems
.map(item => item.rate* item.quantity)
.reduce((prev, curr) => prev + curr, 0));
推荐阅读
- android - Tablayout 后面的视差滚动图像
- ios - How can I add image in UITableView section header using swift?
- java - Where can I find the Java documentation for "==" equals operand?
- java - 在 Java 中,如何在没有循环语句的情况下使用 Scanner 类在一行中接收多个输入?
- python - 无法从 kivy 对象获取 id
- r - ggplot2:将变量移交给函数(非标准评估)
- mysql - Laravel 在其他表中查找平均结果
- mongodb - 使用 GridFS 使用 mongo-go-driver 将文件上传到 MongoDB
- javascript - Generate unique random numbers
- c# - OnTriggerEnter doesn't trigger when hitting another object