KeyValue 管道后的 Angular 自定義過濾器管道

Question

我正在嘗試使用 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 個對象時才有效

Answer 1

我創建了一個函數，它接受一個對象數組，以及一個帶有鍵值對的對象。

數組中對象的鍵必須與對象鍵匹配才能工作。

當我需要根據各種條件過濾數組時，我總是使用它。

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

希望能幫助到你。