Question

我正在使用ngFor显示购物车中的项目列表，并且我可以通过将价格乘以数量来计算购物车中每个项目的总计，现在的问题是如何在列表的底部

HMTL

 <ion-item *ngFor="let item of productServices.itemsInCart">
      <ion-note slot="end"> <span style="font-size: 20px; position: relative; top:15px">GHc {{item.price * item.quantity}}</span></ion-note>
      <ion-thumbnail slot="start">
        <img src="/assets/imgs/{{item.img}}"/>
      </ion-thumbnail>
      <ion-label text-wrap>
        <h2>{{item.name}}</h2>
      </ion-label>

    </ion-item>
    <span>GHc{{totalSum}}</span>

JavaScript

    getTotalCost() {
      let total = 0;
      for (var i = 0; i < this.itemsInCart.length; i++) {
      this.itemsInCart[i].price;
              this.totalSum = this.itemsInCart[i].price * this.itemsInCart[i].quantity;
          }
  }

Answer 1

像这样：

getTotalCost() {
      let total = 0;
      for (var i = 0; i < this.itemsInCart.length; i++) {
      this.itemsInCart[i].price;
              this.totalSum = this.itemsInCart[i].price * this.itemsInCart[i].quantity;
              total = total + this.totalSum
          }

    return total;
  }

Answer 2

//I assume that In component class there is a variable 'totalSum' to display the total cost in view.  

    public totalSum = this.getTotalCost();

          getTotalCost() {
              let total = 0
              for (var i = 0; i < this.itemsInCart.length; i++) {
                      total =  total + this.itemsInCart[i].price * this.itemsInCart[i].quantity;
                  }
                 return total;
          }

用离子和角度计算ngFor中的项目总数

2 个答案: