javascript - 定制管道产品过滤器？

Question

所以我想要实现的是能够在 NgFor 上切换多个过滤器，并且每次打开或关闭过滤器时它都会更新。

我有这个管道:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'filterProducts'
})
export class FilterProducts implements PipeTransform {
    transform(products: any[], args: {[field : string] : string[]}): any[] {  
        if (!products) return [];
        if (!args) return products;

        return products.filter((pr: any) => {

            for(let field in args) {

                if(args[field ].indexOf(pr[field]) === -1) {
                    return false;
                }
            }

            return true;
        });
    }
}

在我的 app.module.ts 中，我有(为了简洁而减少):

import { FilterProducts } from '../pages/products/productsFilter.pipe';

@NgModule({
    declarations: [
        FilterProducts
    ]
})

在我的产品组件中，我有:

public filterArgs : {[field : string] : string[]} = {};

constructor() { }

addBrandFilter(brands: string[]) {
    this.addFilter('brand', brands);
}

addFilter(field: string, values: string[]): void {
    this.filterArgs[field] = values;
}

然后在我的 NgFor 上我有(为简洁起见减少):

*ngFor="let product of products | filterProducts: filterArgs;"

<li class="search-filters__item" (click)="addBrandFilter(['Brand Name'])">Brand Name</li>

我使用模板进行过滤设置的方式，它有价格、品牌和类型的小节。其中有一些用户可以单击的按钮，例如价格为 0-50 或 50-100 等。理想情况下，我希望这些能够同时应用。因此，将选择 0-50 和 50-100，并适当过滤 ngFor。

有人可以给我一些关于如何实现这一目标的建议吗？我到处搜索过，只能根据搜索框或下拉菜单找到管道。

编辑

我现在已更新此内容以反射(reflect)@PierreDuc 给我的帮助。我现在正在努力将相关过滤器传递到filterArgs中。

编辑2

感谢@PierreDuc，我现在再次更新了此内容以反射(reflect)进度。目前 ngFor 不会过滤通过(点击)传递的品牌名称。

提前致谢。

Answer 1

您声明您的 filterArgs 是一个字符串数组。在这种情况下，您应该将过滤器更改为:

@Pipe({
    name: 'filterProducts'
})
export class FilterProducts implements PipeTransform {
    transform(products: any[], field : string, value : string[]): any[] {  
        if (!products) return [];   
        if (!value) return products;     
        return products.filter((pr: any) => {
            return value.indexOf(pr[field]) > -1
        });
    }
}

你可以这样调用它:

*ngFor="let product of products | filterProducts: 'name' : ['cup', 'tea']"

这将返回名称为 cup 或 tea 的所有产品。如果这适用于您，请注意区分大小写

要过滤多个属性，您最好将 {field :values} 对象发送到管道:

要使用您的评论:

let filterArgs : {[field : string] : string[]} = {
   name : ['brand', 'otherbrand'],
   type : ['A', 'B']
};

然后在你的管道中使用它:

*ngFor="let product of products | filterProducts: filterArgs"

你的管道会变成这样:

@Pipe({
    name: 'filterProducts'
})
export class FilterProducts implements PipeTransform {
    transform(products: any[], args: {[field : string] : string[]}): any[] {  
        if (!products) return [];   
        if (!args) return products;     
        return products.filter((pr: any) => {
            for(let field in args) {
                if(args[field ].indexOf(pr[field]) === -1) {
                    return false;
                }
            }
            return true;
        });
    }
}

对于价格评估，我建议您构建一个不同的管道，您可以在其中给出最大和最小设置，并将其与产品的价格进行比较

更新

作为代码的更新，您应该分配类属性，而不是构造函数中的局部变量。并且filterArds是一个对象，而不是一个数组。所以不需要像你一样初始化它:

public filterArgs : {[field : string] : string[]} = {};

constructor() { }

addBrandFilter(brands: string[]) {
    this.addFilter('brand', brands);
}

addFilter(field: string, values: string[]): void {
    this.filterArgs[field] = values;
}