Angular Material mat-table多列过滤逻辑修正求助

问题描述 #

我正在给Angular Material的mat-table添加过滤器，参考了相关教程和源码，但当前过滤器是“或”逻辑——设置ID为3且状态为Active时，本该只显示同时满足两个条件的1条结果，却显示了所有ID为3或状态为Active的条目。请问怎么修改createFilter函数实现多条件“与”的过滤效果？

原代码：

// Custom filter method fot Angular Material Datatable
createFilter() {
  let filterFunction = function (data: any, filter: string): boolean {
    let searchTerms = JSON.parse(filter);
    let isFilterSet = false;
    for (const col in searchTerms) {
      if (searchTerms[col].toString() !== '') {
        isFilterSet = true;
      } else {
        delete searchTerms[col];
      }
    }

    console.log(searchTerms);

    let nameSearch = () => {
      let found = false;
      if (isFilterSet) {
        for (const col in searchTerms) {
          searchTerms[col].trim().toLowerCase().split(' ').forEach(word => {
            if (data[col].toString().toLowerCase().indexOf(word) != -1 && isFilterSet) {
              found = true
            }
          });
        }
        return found
      } else {
        return true;
      }
    }
    return nameSearch()
  }
  return filterFunction
}

修改方案（实现“与”逻辑） #

修改后的代码 #

// Custom filter method for Angular Material Datatable
createFilter() {
  let filterFunction = function (data: any, filter: string): boolean {
    let searchTerms = JSON.parse(filter);
    // 移除空值的过滤条件
    for (const col in searchTerms) {
      if (searchTerms[col].toString().trim() === '') {
        delete searchTerms[col];
      }
    }

    // 无有效过滤条件时直接返回
    if (Object.keys(searchTerms).length === 0) {
      return true;
    }

    let nameSearch = () => {
      // 初始化为true，要求所有条件都满足
      let allConditionsMet = true;
      for (const col in searchTerms) {
        // 拆分当前列的搜索词为单个单词
        const words = searchTerms[col].trim().toLowerCase().split(' ');
        // 当前列需满足所有单词匹配
        let colConditionMet = true;
        words.forEach(word => {
          if (data[col].toString().toLowerCase().indexOf(word) === -1) {
            colConditionMet = false;
          }
        });
        // 只要有一列不满足，整体条件不成立
        if (!colConditionMet) {
          allConditionsMet = false;
        }
      }
      return allConditionsMet;
    }
    return nameSearch()
  }
  return filterFunction
}

关键修改说明 #

• 逻辑核心调整：原代码用found = true实现“任一条件满足即显示”的或逻辑；修改后用allConditionsMet = false实现“所有条件必须满足才显示”的与逻辑。
• 列级匹配严谨性：对每一列的搜索词，要求拆分后的所有单词都能匹配当前列的值（若不需要多词匹配，可移除split(' ')相关逻辑）。
• 空值处理优化：直接通过Object.keys(searchTerms).length判断是否有有效过滤条件，简化原有的isFilterSet变量逻辑。
• 空格容错：增加trim()处理，避免输入空格导致的无效匹配。

内容的提问来源于stack exchange，提问作者Sam KC