Angular 14数据过滤分类问题：点击All/类型仅展示P状态&step01数据

云上老周

2026-8-22

解决方案

问题根源

现有代码的核心问题是：下拉选择时直接基于全量原始数据过滤，未强制保留status='P'和step='01'的固定条件；同时初始化代码存在笔误（his.dataSource应为this.dataSource，stap应为step）。

1. 修正初始化代码并提前过滤基础数据

在获取数据时，先筛选出符合status='P'且step='01'的数据集，后续所有操作都基于这个子集处理，同时修正笔误：

// 组件类中新增属性声明
baseData: any[] = [];

// 初始化数据逻辑
this.prhd.getPr_prhds()
  .subscribe({
    next: data => {  
      // 先过滤出符合基础条件的数据
      const baseFilteredData = data.filter(s => s.status === 'P' && s.step === '01');
      this.dataSource.data = baseFilteredData;
      this.baseData = baseFilteredData; // 保存基础过滤后的数据集
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
      // 从符合条件的数据中提取type选项，避免无效类型
      this.typeOptions= _.uniq(baseFilteredData.map( (item:any) => item['type']));          
      this.typeOptions = ["All"].concat(this.typeOptions);
    }
  });

2. 修改下拉选择事件处理函数

基于提前过滤好的baseData进行类型筛选，确保始终符合status和step条件：

onChange($event:any){
  const selectedValue = $event.value.toLowerCase();
  if(selectedValue === "all"){
    this.dataSource = new MatTableDataSource(this.baseData);
  } else {
    const filteredData = _.filter(this.baseData, (item) => {
      return item.type.toLowerCase() === selectedValue;
    });
    this.dataSource = new MatTableDataSource(filteredData);
  }
  // 重新绑定排序和分页，保证功能正常
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
}