Angular 打印字段外侧的总和*ngFor

我有下面的代码

<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>

{{item.itemName}
价格：{{item.itemPrice}

数量：{{item.Quantity}

总价=
总量

我想打印总价和总数量

---

如何打印ngFor块的itemPrice和quantity end之和。

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

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>

---

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

您的组件应该如下所示：

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>

私有项：数组；
私人总金额：数字；
私人总数量：个数；
构造函数（）{
this.totalAmount=this.getTotal（this.items，'itemPrice'）；
this.totalQuantity=this.getTotal（this.items，'quantity'）；
}
getTotal（项，calculationProperty:string）{
如果（项目类型！==“未定义”）{
返回项目。减少（（总计，项目）=>{
返回总计+项目[计算属性]；
}, 0); 
}
返回0；
}

您的模板应如下所示：

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>

总价={{totalAmount}}
总量={{totalQuantity}}

Totalprice和quantity的值在数组

项中

？或者，您必须从前端HTML计算？为什么不将其相乘并从服务器端本身返回。。。