KeyValue管道之后的角度自定义过滤器管道

时间:2020-03-19 22:38:32

标签: javascript angular typescript

我正在尝试使用Angular的内置键值管道实现自定义过滤器

我有一个带有值的数组,例如

object= [
  { key: "Added_By", value: "Yi" },
  { key: "Assigned_To", value: "-" },
  { key: "Bought_Date", value: 43810 },
  { key: "Brand", value: "Samsung PM863" },
  { key: "Capacity", value: 3.84 },
]

我想根据多个传入值进行过滤,但是传入值会有所不同

它可以是1个键/值

Filter= [{ key: "Added_By", value: "Yi" }]// Return Object

或多个

Filter= [{ key: "Added_By", value: "Yi" }, { key: "Bought_Date", value: 43810 }] //both matches return object

Filter= [{ key: "Added_By", value: "ABC" }, { key: "Bought_Date", value: 43810 }] //1 match but 1 doesn't return false

如果所有条件都满足,我想返回对象

我尝试过一个键/值

  let Key= Filter[0].key
  let Value=Filter[0].value
  let KeyFilter = object.filter(x => x.key === Key)
  if (KeyFilter[0].value.toString().toLowerCase().indexOf(Value.toLowerCase()) !== -1)
            return items

但是这种方法仅在过滤器数组中存在1个对象时有效

1 个答案:

答案 0 :(得分:0)

我创建了一个函数,该函数接受对象数组,以及一个具有键:值对的对象

数组中对象的键必须与对象键匹配才能起作用。

当我需要根据各种条件过滤数组时,我总是使用它。

export const filterArray = (filterData, toBeFiltered) => {
  return toBeFiltered.filter(item => {
    for (const key in filterData) {
      if (item[key] === null || item[key] === undefined) {
        return false;
      } else {
        if (typeof filterData[key] === 'string') {
          if (!(item[key]).toLowerCase().includes((filterData[key].trim()).toLowerCase())) {
            return false;
          }
        } else if (item[key] !== filterData[key]) {
          return false;
        }
      }
    }
    return true;
  });
};

希望有帮助。