Angular 12 mat-autocomplete绑定Observable数据源无法过滤问题

问题根因 #

过滤失效的核心原因是zip操作符的特性不符合当前业务场景：zip要求所有上游Observable同时发射新值才会触发下游执行。你的this.ts.tares是HTTP请求类Observable，仅会发射1次接口返回的数据，后续输入框值变化时，只有valueChanges发射新值、tares无新值发射，zip就不会触发过滤逻辑，所以出现选项加载正常但输入无过滤效果、控制台无报错的现象。

另外你的tare服务当前的getter写法存在冗余请求问题：每次访问ts.tares都会触发新的HTTP请求，完全没有用到你定义的cachedTares缓存能力。

修复方案 #

第一步：优化Tare服务逻辑，避免重复请求 #

修改你的tare服务代码，添加缓存复用逻辑：

public cachedTares: Tare[] = [];
// 新增私有变量存共享流
private taresStream: Observable<Tare[]> | null = null;

public get tares() {
  // 只在第一次调用时发起请求，后续直接返回缓存流
  if (!this.taresStream) {
    this.taresStream = this.api.getTares()
      .pipe(
        tap(tares => this.cachedTares = tares),
        shareReplay(1) // 缓存最新1次结果，所有订阅复用同一份数据
      );
  }
  return this.taresStream;
}

第二步：替换组件中的组合操作符 #

将原来的zip替换为withLatestFrom，符合输入变化时取最新下拉选项做过滤的逻辑：

// 替换原来的filteredTares$定义逻辑
this.filteredTares$ = this.collectForm.get('tare_container').valueChanges
  .pipe(
    startWith(''),
    // 每次输入值变化时，自动取最新的tares数据组合
    withLatestFrom(this.ts.tares),
    map(([value, tares]) => {
      if (!value) return tares || [];
      const filterValue = value.toLowerCase();
      return tares.filter(tare => tare.container_name.toLowerCase().includes(filterValue));
    })
  );

修复后逻辑和你正常运行的waste_type autocomplete逻辑完全对齐，也不需要额外传递参数就可以实现输入过滤的效果。

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