angular - *ngFor 每个元素的局部变量

Question

我有一个函数，我需要为每个将产生 2 个新输出的元素调用该函数。例如

list = [{a : 1, b: 2}, {a:3, b: 4}]

我的 html 是

<div *ngFor="#item of list">{{item.c}}, {{item.d}}</div>

如果您注意到，我正在显示 c 和 d。这些在原始列表中不存在，但我想调用一个函数并计算它们以便显示它们。我不想调用该函数两次。 d = a + b + c 的值。这意味着它依赖于c

我需要我的模板是这样的

<div *ngFor="#item of list; #newItem=calculate(item)">{{newItem.c}}, {{newItem.d}}</div>

我知道我不能为此使用局部变量，但你能想到另一种解决方案吗？

实例:

(a) 是商品价格(b) 是运费(c) 是根据 (a) 计算的销售税(d) 是最终价格 = a + b + c

我要显示:

Price: {{a}}
Taxes: {{c}}
Shipping {{b}}
Final Price: {{d}}

Answer 1

在 *ngFor 中使用数据之前准备数据

list.forEach((item) => {
  item.newItem = calculate(item);
})

<div *ngFor="let item of list">{{item.newItem.c}}, {{item.newItem.d}}</div>