在ngFor中使用过滤函数有什么好处吗？

Question

我发现这里有一些回答建议使用类似以下代码的行：

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

然而，filter(myArray) 会被不断地运行。

我发现像下面这样保留两个数组的方式更加高效。

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

代码

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

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

这里的缺点是我一直在重写filteredArray的内容。然而，它只在需要过滤逻辑时运行，而不是一直运行。

有使用第一种方法的原因吗？它仍然在做相同的工作，但一遍又一遍地重复。

- Matt

---

我在这里找到了一些答案，人们推荐的地方是哪里？ - yurzui

这两者之间没有任何关系，在你的第二个例子中，是谁在调用 onFilterEvent？而在第一个例子中，变更检测将会调用 filter()。 - Milad

Answer 1

出于性能考虑，Angular建议将过滤和排序逻辑移入组件本身。你应该在组件内部进行过滤，而不是不断运行管道或函数：

引用：

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

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

- Sagi

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

否则，为了达到相同的目的，您可以使用不纯的管道，但强烈不建议用于排序、过滤、排序和类似需要 CPU 操作。

- Daniel Kucal