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>

Answer 2

一个选项是创建一个专用的子组件来显示项目：

@Component({
  selector: 'item',
  template: `
    {{item.c}}, {{item.d}}
  `
})
export class ItemComponent {
  @Input()
  set item(item) {
    this._item = this.calculate(item);
  }

  calculate(item) {
    return ...
  }

  get item() {
    return this._item;
  }
}

及其用途：

@Component({
  (...)
  template: `
    <div *ngFor="#item of list">
      <item [item]="item"></item>
    </div>
  `,
  directives: [ ItemComponent'
])
(...)

* ng每个元素的局部变量

2 个答案: