使用一个管道角度2过滤多个列 [英] Filter on multiple columns using one pipe angular 2

问题描述

我正在尝试仅使用一个 Pipe 来过滤基于多个列的数据数据。现在，它过滤第一列值。请检查我的下面的代码，并帮助我排序。

  @Pipe（{name：dataFilter，pure：false}）
 export class DataFilterPipe implements PipeTransform {
 transform（value：Array< any> ;, filter：any []）{
 if（！filter）{
返回值; 
} else if（value）{
 return value.filter（item => {
 for（var i = 0; i< filter.length; i ++）{
 if（filter [i] [1] == undefined）{
 return true; 
} else if（（typeof item [filter [i] [0]] ==='string'|| item （filter [i] [0]] instanceof String）&& 
（item [filter [i] [0]] .toLowerCase（）。indexOf（filter [i] [1]）！ 1））{
 return true; 
} 
 return false; 
} 
}）; 
 
 
 $ b code 
 $ b我传递的数据如 dataFilter：[['column1'，value1]，['column2'，value2]，['column3'，value3]] 。
 
这是一个解决方案，使用作为多列过滤器传递的对象。我发现它更方便，然后传递一个2D数组： 
 
 
  @Pipe（{
名称：'filter'
}）
导出类FilterPipe实现PipeTransform {
转换（items：Array< any>筛选器：{[key：string]：any}）：Array< any> ; {
 return items.filter（item => {
 let notMatchingField = Object.keys（filter）
 .find（key => item [key]！== filter [key] ）; 
 
 return！notMatchingField; //如果匹配所有字段，则返回true 
}）; 
 
 
 
 
 
 
 $ p 
具有多列的对象数组： p> 
 
 
  this.people = [
 {name：'John'，年龄：27，性别：'male'}，
 {名字：'Lara'，年龄：21，性别：'女'}，
 {姓名：'Rick'，年龄：29，性别：'male'}，
 {姓名： 'Eva'，年龄：27，性别：'female'}，
 {姓名：'Mike'，年龄：27岁，性别：'男'} 
]; 
  
和一个过滤器：
 $ b $ 
  this.peopleFilter = {age：27，sex：'male'}; 
  
使用它： 
 
 
 < div * ngFor =let people of people | filter：peopleFilter;>< / div> 
  
结果，两个人符合我们的标准： John 和 Mike 。
 
 
 
这里是工作plunker：多栏过滤管演示。 
I am trying to filter Array data based on multiple columns using only one Pipe. Right now, It filters first column value. Please check my below code and help me to sort this out.


My Code:
@Pipe({ name: "dataFilter", pure: false })
export class DataFilterPipe implements PipeTransform {
    transform(value: Array<any>, filter: any[]) {
        if (!filter) {
            return value;
        } else if (value) {
            return value.filter(item => {
                for (var i = 0; i < filter.length; i++) {
                    if (filter[i][1] == undefined) {
                        return true;
                    } else if ((typeof item[filter[i][0]] === 'string' || item[filter[i][0]] instanceof String) &&
                        (item[filter[i][0]].toLowerCase().indexOf(filter[i][1]) !== -1)) {
                        return true;
                    }
                    return false;
                }
            });
        }
    }
}
I am passing data like dataFilter : [['column1',value1],['column2',value2],['column3',value3]].
解决方案
Here is a solution using the object passed as multiple columns filter. I found it more convenient then passing a 2D array:
    @Pipe({
        name: 'filter'
    })
    export class FilterPipe implements PipeTransform {
        transform(items: Array<any>, filter: {[key: string]: any }): Array<any> {
            return items.filter(item => {
                let notMatchingField = Object.keys(filter)
                                             .find(key => item[key] !== filter[key]);

                return !notMatchingField; // true if matches all fields
            });
        }
    }
Having an array of objects with multiple columns:
this.people = [
  {name: 'John', age: 27, sex: 'male'},
  {name: 'Lara', age: 21, sex: 'female'},
  {name: 'Rick', age: 29, sex: 'male'},
  {name: 'Eva',  age: 27, sex: 'female'},
  {name: 'Mike', age: 27, sex: 'male'}
];
And a filter:
this.peopleFilter = {age: 27, sex: 'male'};
Use it like:
 <div *ngFor="let person of people | filter: peopleFilter;"></div>
As a result, two people are matching our criteria: John and Mike.

Here is the working plunker: Multiple columns filter pipe demo.

                        
这篇关于使用一个管道角度2过滤多个列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！