来自 *ngFor 循环的角度总和动态数据以获取总计、小计和增值税值 (%16)

Question

所以我遇到了问题。我需要根据 *ngFor 循环中的动态数据动态计算 tag.price 的总和，还有 sub-total 和 vat。下面是我的 html 和我的 ts 代码。小计、总计和增值税值将在此块下方的循环之外。任何帮助将不胜感激。

 <tr *ngFor="let tag of locations">

 <td align="center"><span style="font-size: 17px;" class="menu-icon 
 icon-file-text2"></span></td>

 <td>{{tag.title}}</td>

 <th>{{tag.listingType}}</th>

 <th>{{ tag.size }}</th>

 <td>KSH {{tag.price | amount:locale}}</td>

 <td>KSH {{tag.price | amount:locale}}</td>

 </tr>


 // component ts
 setTags(id:any, title:any, price:any, listingType:any, size:any){
this.locations.push({
  title: title,
  id: id,
  price: price,
  listingType: listingType,
  size: size
});

}

Answer 1

您可以在 typescript 中使用函数，也可以只绑定一个表达式。

功能：

<div>
  {{ locationsSum() }}
</div>

public locationsSum() {
  return this.locations.map(tag => tag.price).reduce((a, b) => a + b, 0);
}

表达：

<div>
  {{ locations.map(tag => tag.price).reduce((a, b) => a + b, 0) }}
</div>

我不确定你所说的“小计”和“增值税”是什么意思，但假设这些是基于价格的计算，概念应该是相同的。

编辑：我最初发布的表达式选项不起作用。有关更多信息，请参阅https://github.com/angular/angular/issues/14129。