Angular 2.0.0 final - 具有多个来自现场条件的自定义管道过滤答案

【问题标题】：Angular 2.0.0 final - Custom Pipe filtering with multiple from field conditionsAngular 2.0.0 final - 具有多个来自现场条件的自定义管道过滤
【发布时间】：2017-01-27 17:00:38
【问题描述】：

我正在尝试过滤具有多种来自现场条件的食物（输入和下拉）。我可以单独过滤它们，但我不知道如何让它们一起工作。

我创建了两个单独的自定义管道（一个用于输入过滤器，一个用于下拉过滤器）以使事情更加模块化。

这是输入管道背后的逻辑：

// Input Filter
transform(value: IProduct[], filter: string): IProduct[] {
    filter = filter ? filter.toLocaleLowerCase() : null;
    return filter ? value.filter((product: IProduct) =>
        product.prodName.toLocaleLowerCase().indexOf(filter) !== -1) : value;
}

下拉管道背后的逻辑：

// Dropdown Filter
transform(value: IProduct[], filter: string): IProduct[] {
    return filter ? value.filter((product: IProduct) =>
        product.prodCategory.indexOf(filter) !== -1) : value;
}

这是模板视图中的自定义管道：

<tr *ngFor='let _product of _products | DropdownProductFilter: ddlistFilter.name ||  InputProductFilter: listFilter'

这是一个例子 http://plnkr.co/qwsk86hHLbI26w3HVMdV

【问题讨论】：

标签： angular angular2-forms angular2-pipe

【解决方案1】：

我认为您的模板中有错字，将您的 || 更改为 | 即可：

<tr *ngFor='let _product of _products | DropdownProductFilter: ddlistFilter.name |  InputProductFilter: listFilter'>

【讨论】：