Question

我在这里找到了一些答案，人们建议使用与此类似的代码行：

<div *ngFor="let x of filter(myArray)">

但是，filter(myArray)经常。

我发现保留下面的2个阵列效率更高。

<div *ngFor="let x of filteredArray">

代码

let fullArray = [1,2,3,4,5,6]
let filteredArray = []

onFilterEvent() {
    filteredArray = fullArray.filter(x => /* filtering logic */)
}

这里的缺点是我不断改写filteredArray的内容。但是，它只在需要过滤逻辑时运行，而不是经常运行。

有没有理由使用第一种方法？它仍在做同样的工作，但它一遍又一遍地做。

Answer 1

Angular建议将性能原因中的过滤和排序逻辑移入组件本身。您应该在组件内部进行过滤，而不是不断地运行管道或功能：

Angular团队和许多经验丰富的Angular开发人员强烈建议将过滤和排序逻辑移入组件本身。组件可以公开filteredHeroes或sortedHeroes属性，并控制执行支持逻辑的时间和频率。您在管道中放置并在应用程序中共享的任何功能都可以在过滤/排序服务中编写并注入到组件中。

https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Answer 2

在ngFor中使用过滤功能有什么好处？

不是特别针对*ngFor，但实际上是肯定的。使用ChangeDetectionStrategy.OnPush，使用此方法可以获得两个好处：

比不断过滤更好的性能
因不需要额外变量而减少内存消耗

考虑这个例子：

@Component({
  selector: 'my-app',
  template: `
    <button (click)="refilter()">Refilter</button>
    <h3>Filtered array</h3>
    <div *ngFor="let i of filter(array)">{{i}}</div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App {
  array = [0,1,2,3,4,5,6,7,8,9];

  constructor(protected cdr: ChangeDetectorRef) {}

  filter(array: Array) {
    console.log('array filtered!');
    return array.filter(i => i < 5);
  }

  refilter() {
    this.cdr.markForCheck();
  }
}

PLNKR：https://plnkr.co/edit/qkkW9U7rDlI6eSYGEUrf?p=info

否则为了实现相同的目标，您可以使用impure pipe，强烈建议不要对排序，过滤，排序和类似的CPU操作要求。

在ngFor中使用过滤功能有什么好处？

2 个答案: