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

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 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 - 具有多个来自现场条件的自定义管道过滤

Angular 2.0.0 final - Custom Pipe filtering with multiple from field conditions

angular2-forms

angular2-pipe

angular