angular - 函数被调用多次

Question

我想显示一个数据列表。有些值是从函数计算得出的。 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>

已更新

处理这种情况的最佳方法是使用 Pipe，如下所示:

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>