Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/arrays/12.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 无法计算购物车中的总计_Javascript_Arrays_Angular_Typescript - Fatal编程技术网

Javascript 无法计算购物车中的总计

Javascript 无法计算购物车中的总计,javascript,arrays,angular,typescript,Javascript,Arrays,Angular,Typescript,我正在创建一个简单的购物车应用程序,当用户添加多个数量的相同产品时。我无法计算总数 下面是我的逻辑 产品数据结构 product = { 'productName': 'Sample Product', 'productImage': productImage, 'rate': 100, 'quantity': 1 } this.addToCartService.cartItems.subscribe(product => {

我正在创建一个简单的购物车应用程序,当用户添加多个数量的相同产品时。我无法计算总数

下面是我的逻辑

产品数据结构

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>

    {{cartItem.quantity}}x₹{{cartItem.rate}
总计:₹{{totalPrice}}

我被困在这里,我不知道如何更新退出项目的总数。请帮忙

当前输出为


根据上图,总数应为400。但是它显示为100。

问题是在计算总价时没有考虑数量。要解决此问题,请尝试以下方法:

        this.totalPrice = (this.cartItems
          .map(item => item.rate* item.quantity)
          .reduce((prev, curr) => prev + curr, 0));

这里没有足够的信息来知道出了什么问题。
this.cartItems
中的元素采用什么形式?您是否为您的服务使用任何npm软件包,或者您自己制作的?我已在
this.totalPrice=this.cartItems.map(item=>item.rate).reduce((prev,curr)=>prev+curr,0)中更新了我的问题你在哪里计算数量?@RahulDwivedi,这是我面临的挑战,我不知道如何计算更新后的数量来计算总数