Javascript 在ngFor中使用过滤功能是否有好处？

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

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

代码

这里的缺点是我经常重写

filteredArray

的内容。但是，它只在需要过滤逻辑时运行，而不是经常运行

---

有什么理由使用第一种方法吗？它仍在做同样的工作，但它在不断重复。

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

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

在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();
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
再过滤器
滤波阵列
{{i}
`,
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类应用程序{
数组=[0,1,2,3,4,5,6,7,8,9]；
构造函数（受保护的cdr:ChangeDetectorRef）{}
过滤器（数组：数组）{
log（'array filtered！'）；
返回数组.filter（i=>i<5）；
}
再过滤{
this.cdr.markForCheck（）；
}
}

PLNKR：

---

否则，为了实现您可以使用的相同目标，在排序、筛选、排序和类似的CPU操作要求方面，强烈不建议使用的选项。

我在这里找到了一些答案，人们推荐了这些选项

您在哪里找到的？在第二个示例中，这两个选项互不相关，谁在调用过滤事件上的

onFilterEvent

？在第一个中，更改检测将调用

filter（）

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

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

@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();
  }
}