0

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

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

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

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

4

1 回答 1

1

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

<tr *ngFor='let _product of _products | DropdownProductFilter: ddlistFilter.name |  InputProductFilter: listFilter'>
于 2016-09-20T01:41:15.570 回答