Angular 表列的多个值上的角度过滤管

我试图在表中的多个属性上的多个值上实现过滤管道

我能够在一个属性上过滤多个值。但我无法对多个属性的多个值执行此操作

针对单个属性中的多个值的My pipe筛选器实现

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

@Pipe({
  name: 'vFilter',
  pure: false
})

export class VFilterPipe implements PipeTransform {

  transform(vList: any[], vfilter?: any): any {
    if (!vList|| !Object.keys(vfilter).length) {
      return vList;
    } 
    return vList.filter(item => {
          for (let key in vfilter) {
            for(let value in vfilter[key]){
             if ((item[key] === undefined || item[key] == vfilter[key][value])) 
             {
              return true;
             }
           }
           return false;
         }
         return false;
       });
  }
}

我的输入数组是

vList = [{'name':'jack','age':'25'},{'name':'sam','age':'25'},{'name':'smith','age':'25'},{'name':'jack','age':'28'}]

vfilter = {'name':['jack','sam'],'age':['25']}

我希望过滤后的输出与下面的一样

vList = [{'name':'jack','age':'25'},{'name':'sam','age':'25'}]

但我得到的结果如下

vList = [{'name':'jack','age':'25'},{'name':'sam','age':'25'},{'name':'jack','age':'28'}]

---

有人能帮我解决这个逻辑问题吗。

您的代码逻辑错误是，如果任何筛选器匹配，您将返回

true

，而您只想在所有筛选器匹配时返回true

---

这不是你的逻辑问题的答案，但这是一个糟糕的管道使用。不纯管道效率非常低，可能会影响性能。您最好在控制器中设置此过滤器逻辑，并在需要更新时运行它，而不是依赖更改检测谢谢@bryan60的建议。我已将实现从管道更改为组件。感谢@Igor提供解决方案。这对我有用。

transform(vList: any[], vfilter?: any): any {
  if (!vList || !Object.keys(vfilter).length) {
    return vList;
  } 
  return vList.filter(item => {
          return Object.keys(vfilter)
            .filter(_ => vfilter.hasOwnProperty(_))
            .every(key => {
              if(!item[key]) return true; // matches undefined value
              const arrayValues = vfilter[key] as any[];
              return arrayValues.some(_ => _ === item[key]);
          });
      });
}