函数被多次调用

Question

我想显示一个dataList.某些值是从函数计算的.似乎angular2多次调用计算函数.

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

控制台将多次输出"calculate ...",超过dataList.length.

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

我应该担心性能还是让angular2这样做？

Answer 1

您可以将组件changeDetectionStrategy更改为onPush。之后，您的calculateFunction函数不会多次调用。

要做到这一点 ：

在您的组件中：

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 changeDetection: ChangeDetectionStrategy.OnPush // this line
})

export class AppComponent {

  ....

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

并在您的app.component.html中：

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

Answer 2

caculateFunction(data.price)每当Angular运行组件的更改检测时(更准确地说,对于创建的嵌入视图ngFor),将调用该函数.这是因为更新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,0,currVal_0);
  }

阅读更多关于Angular如何在Angular中更新DOM 的机制中更新DOM的信息.

我应该担心性能还是让angular2这样做？

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

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

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