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

每次Angular运行组件的更改检测时，都会调用caculateFunction(data.price)函数（更准确地说，是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如何更新The mechanics of DOM updates in Angular中的DOM。

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

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

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

这样可以避免性能下降函数调用。

Answer 2

您可以将组件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 3

@Component({
.
.
 changeDetection: ChangeDetectionStrategy.OnPush // this line
})
export class MyComponent {
}

将更改检测添加到组件装饰器为我解决了这个问题。

函数被多次调用

3 个答案: