Angular 函数被多次调用

我想显示一个数据列表。有些值是通过函数计算的。angular2似乎多次调用计算函数

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

我应该为性能担心还是让angular2来做这件事？

每次对组件进行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);
  }

了解有关如何在中更新DOM的更多信息

我应该为表现担心还是让angular2去做 这个

如果

calculateFunction（data.price）

以相同的价格返回相同的结果，那么最好事先为每个项目计算这些值，并在模板中简单地呈现它们

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

{{data.no}
{{data.name}
{{data.calculatePrice）}您可以将components 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>

然后使用：

<tr *ngFor="let data of dataList">
   <td>{{ data.no }}</td>
   <td>{{ data.name }}</td>
   <td>{{ data.price |handlePrice }}</td>
</tr>


{{data.no}
{{data.name}
{{data.price | handlePrice}}

向组件装饰器添加更改检测为我解决了这个问题。
可能是有什么东西触发了模型更改，导致它再次为所有元素运行该函数。如果它是一个轻量级函数，没有什么大不了的，如果它是更复杂的东西，那么最好尝试在组件内部处理它。@JohnMontgomery只有一件事触发模型更改。dataList在init状态下未定义，然后在请求完成时将http结果分配给dataList。这为我解决了这个问题，谢谢
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'handlePrice'
})
export class HandlePricePipe implements PipeTransform {
  transform(price: number): number {
    console.log('In Pipe ....');
    return price * 2;
  }
}

<tr *ngFor="let data of dataList">
   <td>{{ data.no }}</td>
   <td>{{ data.name }}</td>
   <td>{{ data.price |handlePrice }}</td>
</tr>

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