Angular 10+ 多复选框筛选功能实现问题求助

1. 基础数据结构定义 #

组件内预先定义三类核心数据，避免筛选逻辑混乱：

• originalData: any[] = []; 存储全量原始数据，全程不做修改，作为所有筛选操作的基准数据源
• selectedFilters: Set<string> = new Set(); 存储当前选中的筛选条件值，用Set结构自带去重、增删操作更便捷
• displayData: any[] = []; 绑定到视图层的展示数据，每次筛选完成后仅更新该变量即可

2. 复选框事件绑定 #

无需额外注册全局事件监听器，直接使用Angular模板内置的(change)事件即可满足需求，模板内复选框示例写法：

<div *ngFor="let option of filterOptions">
  <input 
    type="checkbox" 
    [value]="option.value" 
    (change)="onFilterChange($event)"
  >
  <label>{{option.label}}</label>
</div>

对应的事件处理函数逻辑：

onFilterChange(event: Event): void {
  const target = event.target as HTMLInputElement;
  const value = target.value;
  if (target.checked) {
    this.selectedFilters.add(value);
  } else {
    this.selectedFilters.delete(value);
  }
  // 每次选中状态变更后触发筛选逻辑
  this.runFilter();
}

3. 核心筛选逻辑实现 #

根据业务需求调整筛选判断规则，以下为通用的多条件筛选示例：

runFilter(): void {
  // 无选中条件时直接展示全量数据
  if (this.selectedFilters.size === 0) {
    this.displayData = [...this.originalData];
    return;
  }
  // 按需调整判断逻辑：同组筛选用some（或关系），跨组筛选用every（且关系）
  this.displayData = this.originalData.filter(item => {
    return Array.from(this.selectedFilters).some(filterVal => {
      // 此处替换为实际业务字段匹配规则，比如匹配分类、标签、状态等字段
      return item.category === filterVal || item.tag === filterVal;
    });
  });
}

4. 视图更新处理 #

直接将displayData通过*ngFor绑定到列表模板即可，Angular自带的变更检测机制会在displayData更新后自动刷新视图，无需手动操作DOM：

<!-- 列表展示区域 -->
<div *ngFor="let item of displayData">
  <span>{{item.title}}</span>
  <span>{{item.category}}</span>
</div>

注意事项 #

• 原始数据需单独存储不要修改，避免每次筛选都需要重新请求接口
• 多维度筛选时可将selectedFilters按维度分组存储，比如selectedFilters: {category: Set<string>, status: Set<string>}，不同维度分别判断匹配规则
• 数据量级较大时可给筛选逻辑加防抖处理，避免频繁触发计算影响性能

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