Angular中如何检查多空值？多选下拉框过滤失效问题解决

我的Angular应用UI里有3个绑定了ngModel的多选下拉框，用户可通过它们选择内容，对应变量如下：

country = ["India", "US"]
state = ["Delhi", "MP","UP"]
city = ["gzb","xyz"]

我基于这些选择结果实现了自定义过滤逻辑：

filter = {
  country: this.country,
  state: this.state,
  city: this.city
}

result = data.filter(e =>
  Object.entries(filters).every(([key,vals])=>vals.includes(e[key]))
)

但当仅country数组有值，其余两个数组为空时，过滤逻辑会失效。请问如何检查空值以修复该问题？

测试数据：

data=[{
  "name":"hello",
  "gender":"male",
  "country":"India",
  "state":"Delhi",
  "city":"gzb"
}]

问题根源是：当过滤项对应的数组为空时，vals.includes(e[key])会返回false，导致every方法直接判定整个条件不成立，最终过滤结果为空。

可以通过两种方式修复：

方式一：在判断中跳过空数组条件 #

修改过滤逻辑，当数组为空时直接视为满足该条件，只有数组有值时才校验是否包含对应字段：

result = data.filter(e =>
  Object.entries(filters).every(([key, vals]) => {
    return vals.length === 0 || vals.includes(e[key]);
  })
);

比如当state和city数组为空时，这两个条件会直接返回true，只校验country的匹配情况，就能得到正确结果。

方式二：先过滤掉无效的空数组条件 #

先从filters中移除值为空数组的项，再进行过滤判断，逻辑更清晰：

// 筛选出有值的过滤条件
const validFilters = Object.fromEntries(
  Object.entries(filters).filter(([_, vals]) => vals.length > 0)
);

// 无有效过滤条件时返回全部数据，否则执行过滤
result = Object.keys(validFilters).length === 0 
  ? [...data] 
  : data.filter(e =>
      Object.entries(validFilters).every(([key, vals]) => vals.includes(e[key]))
    );

这种方式还能避免无选中项时的不必要遍历，直接返回所有数据。

内容的提问来源于stack exchange，提问作者Rahul Jain