Angular8开发员工搜索功能触发TS2339: Observable<Employee[]>无filter属性错误

• 你当前定义的employees变量类型是Observable<Employee[]>，但代码里写的this.employees.filter = this.searchKey.trim().toLowerCase()，是Angular Material *MatTableDataSource*类专属的内置可赋值属性，原生Observable上根本不存在这个可直接赋值的filter实例属性，所以直接触发TS2339的类型校验报错。
• 你从rxjs/operators导入的filter是RxJS管道操作符，作用是拦截Observable流的发射值、满足布尔判定条件时才放行数据，和“按搜索词过滤数组列表”的业务逻辑并不是直接匹配的场景，不能直接拿这个操作符来实现列表过滤的赋值逻辑。
• 变量设计的适配性问题：你直接把后端接口返回的Observable赋值给模板绑定的变量，没有对数据做后续加工，也没有适配MatTable组件要求的数据源格式。

你的项目版本是Angular 8 + RxJS 6.4，有两种适配现有代码的实现方式，根据你的组件使用场景选择：

方案1：适配MatTable的标准实现（推荐，和你当前的displayedColumns配置匹配） #

你代码里已经定义了displayedColumns属性，说明是打算用MatTable渲染表格，这种场景直接用官方推荐的MatTableDataSource做数据源就能解决报错，调整步骤如下：

1. 导入MatTableDataSource依赖，替换原来的Observable类型变量：

   // 新增导入
   import { MatTableDataSource } from '@angular/material/table';
   
   // 删掉原来的 employees: Observable<Employee[]>;
   // 替换成MatTable专属数据源实例
   employees = new MatTableDataSource<Employee>();
   

2. 修改reloadAllEmployees方法，把接口返回的员工数组赋值给数据源的内置data属性：

   reloadAllEmployees() {
     this.employeeService.getEmployeesList().subscribe((employeeList: Employee[]) => {
       this.employees.data = employeeList;
     })
   }
   

3. 原来的applyFilter方法不需要改逻辑，因为现在employees是MatTableDataSource实例，本身就有可赋值的filter属性，直接赋值就可以触发内置的列表过滤逻辑：

   applyFilter() {
     this.employees.filter = this.searchKey.trim().toLowerCase();
   }
   

   如果需要自定义过滤匹配规则（比如仅匹配员工姓名、邮箱，不匹配其他字段），可以在ngOnInit里给数据源加自定义判定逻辑：

   ngOnInit() {
     // 自定义过滤匹配规则
     this.employees.filterPredicate = (employee: Employee, searchStr: string) => {
       return employee.name.toLowerCase().includes(searchStr) || 
              employee.email.toLowerCase().includes(searchStr);
     }
     this.reloadAllEmployees();
   }
   

方案2：纯RxJS响应式实现（适合用*ngFor渲染列表的场景） #

如果你不打算用MatTable，直接用原生循环渲染员工列表，可以通过RxJS流的联动实现搜索过滤，不需要手动触发过滤方法：

1. 调整组件变量定义，搭建流的基础结构：

   // 新增FormControl做搜索框的流绑定
   import { FormControl } from '@angular/forms';
   // 新增RxJS操作符导入
   import { startWith, map, switchMap } from 'rxjs/operators';
   
   // 替换原来的employees变量
   searchKeyControl = new FormControl('');
   employees$: Observable<Employee[]>;
   

2. 在ngOnInit里搭建搜索词和员工列表的联动逻辑：

   ngOnInit() {
     this.employees$ = this.searchKeyControl.valueChanges.pipe(
       // 初始值设为空字符串，保证首次加载全量数据
       startWith(''),
       // 每次搜索词变化时，关联接口获取的员工列表做过滤加工
       switchMap((searchValue) => {
         return this.employeeService.getEmployeesList().pipe(
           map((employeeList) => {
             const lowerSearchStr = searchValue.trim().toLowerCase();
             // 搜索词为空时直接返回全量列表
             if (!lowerSearchStr) return employeeList;
             // 按需要匹配的字段做数组过滤
             return employeeList.filter(emp => 
               emp.name.toLowerCase().includes(lowerSearchStr) ||
               emp.email.toLowerCase().includes(lowerSearchStr)
             )
           })
         )
       })
     )
   }
   

3. 模板里的搜索框直接绑定searchKeyControl，列表渲染时用async管道订阅employees$，不需要额外写applyFilter和onSearchClear的手动触发逻辑，清空输入框时流会自动触发更新全量列表。

• 不要混淆同名的两个filter逻辑：RxJS的filter是对流的发射值做拦截，数组的filter是对数组元素做遍历筛选，二者虽然名字相同，但作用场景完全不一样。
• 不要给Observable实例直接挂载自定义属性，Observable是流的抽象类型，所有流的加工逻辑都需要在pipe管道内完成，不支持直接给实例赋值自定义属性。
• 之前导入的RxJS filter操作符如果没有实际使用，建议删掉导入，避免出现TS未使用变量的编译告警。

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