angular – 函数被多次调用

<tr *ngFor="let data of dataList">
    <td>{{ data.no }}</td>
    <td>{{ data.name }}</td>
    <td>{{ calculateFunction(data.price) }}</td>
  </tr>

calculateFunction() {
  console.log('calculate...');
  return ...;
}

每当Angular运行组件的更改检测时(更准确地说,对于由ngFor创建的嵌入视图),将调用caculateFunction(data.price)函数.这是因为更新DOM是变更检测的一部分,Angular需要调用caculateFunction来了解用于DOM更新的值.并且更改检测周期可以经常运行.因此,如果列表中有3个项目并且CD最初被触发3次,您将看到该函数被调用9次.

如果你检查updateRenderer函数,你应该看到这些内容：

function(_ck,_v) {
    var _co = _v.component;
    var currVal_0 = _co.calculateFunction(_v.context.$implicit);
    _ck(_v,3,currVal_0);
  }

阅读更多关于Angular如何在The mechanics of DOM updates in Angular中更新DOM的信息.

Should I worry about that for performance or just let angular2 do
this?

如果calculateFunction(data.price)以相同的价格返回相同的结果,则最好事先为每个项目计算这些值,并在模板中简单地渲染它们.

<td>{{ data.no }}</td>
<td>{{ data.name }}</td>
<td>{{ data.calculatePrice) }}</t

这样,您将避免性能下降函数调用.