Angular对象数组多键筛选问题：多条件includes筛选失效

待筛选数组 #

const array = [
    {
        "id": 1,
        "key": "key1",
        "name": "name1",
        "area": "area1",
        "functionalArea": "func1",
        "lob": "lob1",
    },
    {
        "id": 2,
        "key": "key2",
        "name": "name2",
        "area": "ALL",
        "functionalArea": "ALL",
        "lob": "ALL",
    },
];

现有Angular实现代码 #

const { name, id, functionalArea, area, lob } = this.form.getRawValue();
const searchTerms = {
  widgetName, // 变量名不匹配，应为name
  widgetId,   // 变量名不匹配，应为id
  functionalArea,
  area,
  lob,
};

.subscribe(
    (res) => {
      let results = array.filter((item) =>
      searchTerms.functionalArea === 'ALL' &&
      searchTerms.area === 'ALL' &&
      searchTerms.lob === 'ALL' &&
      !searchTerms.id &&
      !searchTerms.name
        ? item
        : item.key.toLowerCase().includes(searchTerms.widgetId.toLowerCase()) ||
          item.name.toLowerCase().includes(searchTerms.widgetName.toLowerCase()) ||
          (item.functionalArea.toLowerCase().includes(searchTerms.functionalArea.toLowerCase()) &&
            item.area.toLowerCase().includes(searchTerms.area.toLowerCase()) &&
            item.lob.toLowerCase().includes(searchTerms.lob.toLowerCase()))
      );
    },
);

遇到的问题 #

使用includes()进行多条件组合筛选时功能失效，但仅保留单个条件时includes()可正常工作。

核心问题 #

1. 变量名映射错误：解构得到的name和id没正确赋值给searchTerms里的widgetName和widgetId，导致这两个筛选条件用了未定义变量，逻辑直接出错。
2. 逻辑结构混乱：没处理搜索条件为ALL的场景（比如搜索的functionalArea是ALL时，应该跳过该字段匹配，而非强制匹配item的字段），同时||和&&的优先级导致判断逻辑不符合预期。

修复后的代码 #

const { name, id, functionalArea, area, lob } = this.form.getRawValue();
// 修正变量名映射
const searchTerms = {
  widgetName: name,
  widgetId: id,
  functionalArea,
  area,
  lob,
};

.subscribe(
    (res) => {
      const results = array.filter(item => {
        // 全匹配场景：所有区域条件为ALL，且id和name为空，返回所有项
        const isAllMatch = 
          searchTerms.functionalArea === 'ALL' &&
          searchTerms.area === 'ALL' &&
          searchTerms.lob === 'ALL' &&
          !searchTerms.widgetId &&
          !searchTerms.widgetName;
        
        if (isAllMatch) {
          return true;
        }

        // ID匹配：有输入才判断，避免空值报错
        const matchesId = searchTerms.widgetId 
          ? item.key.toLowerCase().includes(searchTerms.widgetId.toLowerCase()) 
          : false;
        // 名称匹配：同上
        const matchesName = searchTerms.widgetName 
          ? item.name.toLowerCase().includes(searchTerms.widgetName.toLowerCase()) 
          : false;

        // 区域类条件匹配：搜索条件为ALL则直接满足，否则匹配对应字段
        const matchesFunctionalArea = searchTerms.functionalArea === 'ALL' 
          ? true 
          : item.functionalArea.toLowerCase().includes(searchTerms.functionalArea.toLowerCase());
        const matchesArea = searchTerms.area === 'ALL' 
          ? true 
          : item.area.toLowerCase().includes(searchTerms.area.toLowerCase());
        const matchesLob = searchTerms.lob === 'ALL' 
          ? true 
          : item.lob.toLowerCase().includes(searchTerms.lob.toLowerCase());
        const matchesRegions = matchesFunctionalArea && matchesArea && matchesLob;

        // 满足任意一种匹配即可保留
        return matchesId || matchesName || matchesRegions;
      });
    },
);

修复说明 #

• 修正了searchTerms的变量名映射，确保筛选条件能正确获取表单值。
• 将复杂逻辑拆分为独立判断块，可读性更强，避免了优先级混乱。
• 对区域类条件做了特殊处理：搜索条件为ALL时自动满足，符合业务逻辑。
• 每个筛选条件都增加了空值判断，避免空字符串调用toLowerCase()报错。

内容的提问来源于stack exchange，提问作者André Castro