将产品添加到购物车中，使用角度6在购物车页面中多次显示总金额

Question

我正在开发一个电子商务网站。在这种情况下，如果我从首页添加产品，则这些产品会列在购物车页面中，但是根据产品的不同，不会显示或多次显示金额。

这是我的代码：

cart.ts

get Total(){
    let total = 0;
    for (var i = 0; i < this.cartItem.length; i++) {
        if (this.cartItem[i].Price) {
          total += this.cartItem[i].Price * this.cartItem[i].Quantity;
            this.totalamount = total;
        }
    }
    return total;
}

cart.html：

  <div class="total-price">

              <div class="container">
                <div class="row">
                  <div class="col-xs-2 col-sm-2 col-md-6 col-lg-8">
                    Price({{cartItem.length}} items)
                  </div>
                  <div class="col-xs-10 col-sm-10 col-md-6 col-lg-4">
                    <i class="fa fa-inr"></i>&nbsp; {{ Total }}
                  </div>
                </div>
              </div>

我得到这样的输出：

我只想对所有产品一次显示总金额。如何实现？

Answer 1

在ngFor中有总计时，将为列表的每个项目显示该总计，因此您会看到许多总计显示。

我建议您在component.ts中定义一个打字稿方法，并在要显示总数的HTML中调用它。

getTotal(){
    let total = 0;
    for (var i = 0; i < this.cartItems.length; i++) {
        if (this.cartItems[i].amount) {
            total += this.cartItems[i].amount * this.cartItems[i].quantity;
            this.totalamount = total;
        }
    }
    return total;
}