时间戳

首页 > 解决方案 > KeyValue管道之后的角度自定义过滤器管道

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

问题描述

在使用 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 个对象时才有效

标签： javascriptangulartypescript

解决方案

我创建了一个函数，它接受一个对象数组和一个带有键：值对的对象。

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

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

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;
  });
};

希望能帮助到你。

推荐阅读