优先级复选框过滤问题：数组push报错及RxJS filter用法咨询

1. 修复push报错问题 #

报错TypeError: Cannot read properties of undefined (reading 'push')的原因是priorityArr仅做了类型声明，未初始化为数组。

修复代码：

// 直接初始化为空数组
priorityArr: any[] = [];

selectedCheckBoxFilter(prio: any){
  console.log('demo --> ',prio)
  console.log("prioLevel parent ",prio.priorityLevel)

  console.log("priority array -->",this.priorityArr);
  for(let i=0;i<this.data.length;i++){
    if(this.data[i].priority==prio.priorityLevel){
      if(prio.canEnable){
        console.log(this.data[i]);
        this.priorityArr.push(this.data[i])
      }
    }
  }
}

2. 优化过滤逻辑（避免重复添加/未处理取消勾选） #

原逻辑仅处理勾选添加，未处理取消移除，且重复勾选会导致数据重复。调整后的逻辑：

priorityArr: any[] = [];

selectedCheckBoxFilter(prio: any) {
  // 筛选当前优先级对应的所有数据项
  const targetItems = this.data.filter(item => item.priority === prio.priorityLevel);
  
  if (prio.canEnable) {
    // 勾选时：添加不在数组中的项，避免重复
    targetItems.forEach(item => {
      if (!this.priorityArr.includes(item)) {
        this.priorityArr.push(item);
      }
    });
  } else {
    // 取消勾选时：移除该优先级的所有项
    this.priorityArr = this.priorityArr.filter(item => item.priority !== prio.priorityLevel);
  }
}

3. RxJS filter操作符实现方案 #

用RxJS的响应式方式管理选中状态，自动完成过滤：

代码实现 #

import { BehaviorSubject, combineLatest, map } from 'rxjs';

// 存储已选中的优先级集合（响应式状态）
selectedPriorities$ = new BehaviorSubject<string[]>([]);
// 原始数据转为Observable（若data是动态的，可后续用next更新）
data$ = new BehaviorSubject(this.data);

// 实时生成过滤后的结果Observable
filteredData$ = combineLatest([this.data$, this.selectedPriorities$]).pipe(
  map(([data, selectedPrios]) => {
    // 用RxJS风格的filter过滤数据
    return data.filter(item => selectedPrios.includes(item.priority));
  })
);

// 处理子组件复选框事件
selectedCheckBoxFilter(prio: any) {
  const currentSelected = this.selectedPriorities$.value;
  let updatedSelected: string[];

  if (prio.canEnable) {
    // 勾选：添加优先级，用Set去重
    updatedSelected = [...new Set([...currentSelected, prio.priorityLevel])];
  } else {
    // 取消：移除对应优先级
    updatedSelected = currentSelected.filter(p => p !== prio.priorityLevel);
  }

  // 更新选中状态
  this.selectedPriorities$.next(updatedSelected);
}

模板展示 #

使用Angular异步管道自动订阅/取消订阅：

<div *ngFor="let item of filteredData$ | async">
  <!-- 渲染数据项内容 -->
</div>

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