5

我正在对 Angular2 中的数组执行过滤操作。当数组中的元素更改时，不会触发纯管道。因此，我必须使用不纯的管道或使用组件内部的函数进行过滤，如下所示。

*ngFor="let item of items | impureFilterPipe"

或者，

<!-- component.html -->
*ngFor="let item of filterFunction(items)"

// component.ts
sortFunction(items) { return items.sort(); }

据我所知，在模板中绑定一个函数在性能方面很糟糕。但是，我看不出使用不纯管道而不是函数有什么区别。我想知道的是，上面这两种方法的性能有什么区别吗？

4

2 回答 2

3

正如评论中所指出的，Angular 团队自己建议不要使用管道来过滤或排序集合。解释是这些管道基本上会在每个变更检测周期运行，即使是少量集合，它们也相当昂贵。

标准解决方案是控制何时进行排序操作，例如：

*ngFor="let item of filteredItems"

ngOnInit() {
  this.filteredItems = this.items.filter(/***/);
  ...
}

如果您想按需运行它，您也可以将该逻辑包装在它自己的函数中。

于 2018-06-18T08:55:55.547 回答
1

不建议使用不纯的管道。它会影响你的表现。即使源没有更改，它也会被调用，因此正确的替代方法是更改​​返回对象的引用。甚至更好的是，将过滤逻辑移动到组件级别。

// inside component
someMethod():void{
  this.items.push(newItem);
this.items = Object.clone(this.items);
}



@Pipe({
    name: 'showfilter'
})

export class ShowPipe {
    transform(value) {
        return value.filter(item => {
            return item.visible == true;
        });
    }
}
于 2019-02-10T10:13:48.183 回答