在Angular中(从版本2开始),您可以使用自定义管道来过滤一组数据。您可以通过简单地一个接一个地添加它们来链接模板中的那些管道,如下所示:
<app-orange
*ngFor="let orange of oranges |
colorFilter:filteredColor |
sizeFilter:filteredSize |
originFilter:filteredOrigin,
let i = index">
</app-orange>
管道将过滤模板中的数据,所以你最终会看到,例如只有来自瓦伦西亚的大黑橘,但在我的情况下,我需要将过滤后的数组传递给我的Angular逻辑代码或类,以后再使用。
我知道你可以在组件的逻辑中使用管道,只需在提供程序中,在构造函数中声明它,并使用&#39; .transform&#39;方法。
export class GuestsListComponent implements OnInit, OnDestroy {
oranges = [orange1, orange2, orange3, orange4, orange5];
filteredColor = 'dark';
filteredSize = 'big';
filteredOrigin = 'Valencia';
constructor(
private colorPipe: ColorFilterPipe,
private sizePipe: SizeFilterPipe,
private originPipe: OriginFilterPipe) {}
ngOnInit() {
const filteredByColor = this.colorPipe.transform(this.guests,this.filteredColor);
const filteredBySize = this.sizePipe.transform(this.guests, this.filteredSize);
const filteredByOrigin = this.originPipe.transform(this.oranges, this.filteredOrigin);
}
问题是:如何在逻辑中链接这些管道?如何根据颜色,大小和原点同时过滤,而不必手动交叉单独应用的管道中的三个结果数组?
const filteredByAll = ???
感谢。