Question

我有以下代码

<ion-card *ngFor="#item of cartmodel">

    <ion-card-header>
        {{item.itemName}}
    </ion-card-header>
    <ion-card-content>
        <ion-list>
            <ion-item class="item">
                <ion-thumbnail item-left>
                    <img src="{{item.itemImage}}">
                </ion-thumbnail>
                <!--<h2>My Neighbor Totoro</h2>-->
                <p><i>Price :</i>{{item.itemPrice}}</p>
                <p><i>Quantity :</i>{{item.quantity}}</p>
                <!--<button clear item-right>View</button>-->
            </ion-item>
            <ion-item class="item">
            </ion-item>
        </ion-list>

    </ion-card-content>
</ion-card>

<ion-item>
    <ion-icon name='planet' item-left></ion-icon>
    Total Price =
    <ion-note item-right>
        Total Quantity
    </ion-note>
</ion-item>

我想打印总价和总数量。

如何打印 ngFor 块的itemPrice和数量结束的总和。

Answer 1

如果您的服务器没有在列表的同一时间返回这些提示，则需要直接在组件中计算总数：

this.http.get(...).subscribe(
  (data) => {
    this.cartmodel = data;
    this.totals = this.calculateTotals(data);
  }
);

然后你可以在模板中使用totals属性：

<ion-item>
    <ion-icon name='planet' item-left></ion-icon>
    Total Price = {{totals.price}}
    <ion-note item-right>
        Total Quantity {{totals.quantity}}
    </ion-note>
</ion-item>

calculateTotals方法如下所示：

calculateTotals(data) {
  let totalPrice = 0;
  let totalQuantity = 0;

  data.forEach(d) => {
    totalQuantity += d.quantity;
    totalPrice += d.itemPrice;
  });

  return {
    price: totalPrice,
    quantity: totalQuantity
  };
}

Answer 2

使用两个变量来存储总价和总数量。使用单向数据绑定到这些变量。每当项目添加到列表时，更新这两个变量。

您的组件应如下所示：

private items: Array<any>;
private totalAmount:number;
private totalQuantity:number;

constructor(){
   this.totalAmount = this.getTotal(this.items, 'itemPrice');
   this.totalQuantity= this.getTotal(this.items, 'quantity');
}

getTotal(items, calculationProperty: string) {
    if(typeof items !== 'undefined') {
      return items.reduce((total, item) => {
          return total + item[calculationProperty];
      }, 0); 
    }
    return 0;
  }

您的模板应如下所示：

<ion-item>
    <ion-icon name='planet' item-left></ion-icon>
    Total Price = {{ totalAmount }}
    <ion-note item-right>
        Total Quantity = {{ totalQuantity }}
    </ion-note>
</ion-item>

打印字段的总和* ngFor

2 个答案: