如何在Angular组件逻辑类中链接多个管道?

时间:2017-06-16 12:59:00

标签: javascript arrays angular pipes-filters

在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 = ???

感谢。

0 个答案:

没有答案