Angular互斥复选框：勾选ALL时展示所有数据的实现方案

需要实现的效果：勾选ALL复选框时，展示Material Table中的所有行。当前逻辑是根据匹配值过滤行，但ALL并非表格数据中的实际值。

只需修改现有的过滤判断逻辑，在ALL被勾选时直接返回全量数据，修改后的代码如下：

if (
  !this.identifierFilterValue ||
  this.identifierFilterValue.length === 0 ||
  this.identifierFilterValue.includes('ALL') // 新增判断：若包含ALL则返回全量数据
) {
  console.log('No Identifier Filters are selected or ALL is checked, return full data');
  return [...data];
}

测试方法 #

页面加载后点击搜索按钮，多次切换ALL复选框，验证勾选ALL时所有行正常显示，未勾选时保持原有逻辑。

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