Question

我正在尝试使用多种野外条件过滤食物（输入和下拉）。我可以单独过滤它们，但我无法弄清楚如何让它们一起工作。

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

以下是输入管道背后的逻辑：

// 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 Pipe背后的逻辑：

// 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

Answer 1

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

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

Angular 2.0.0 final - 使用多个字段条件自定义管道过滤

1 个答案: