Angular多HTTP请求合并Observable仅输出最后一个结果问题求助

错误根源 #

1. 模板中多余的async管道：forkJoin会等待所有Observable完成，返回一个包含三个请求结果的普通数组，而非Observable数组。你在模板里对list使用| async，相当于把普通数组当成Observable处理，直接触发报错。
2. 空值返回结构不一致：输入为空时返回of([])，但正常搜索时返回的是[客户数组, 商品数组, 任务数组]的结构，结构不统一会导致模板遍历逻辑混乱。

修正后的TypeScript代码 #

ctl: FormControl = new FormControl();

this.list$ = this.ctl.valueChanges
  .pipe(
    debounceTime(100),
    startWith(null),
    mergeMap((res: any) => {
      if (res) {
        this.keyword = res;
        // forkJoin返回包含三个请求结果的数组Observable
        return forkJoin([
          this.dataService.searchCustomer(res),
          this.dataService.searchItem(res),
          this.dataService.searchTask(res)
        ]);
      } else {
        // 返回与正常搜索一致的空数组结构，保持类型统一
        return of([[], [], []]);
      }    
    })
  );

修正后的模板代码 #

<input type="text" placeholder="Enter title" aria-label="Number" matInput [formControl]="ctl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
  <!-- list$ | async 已将Observable解析为三个结果数组的集合 -->
  <ng-container *ngFor="let resultList of list$ | async">
    <!-- 直接遍历每个请求返回的结果数组，无需再用async -->
    <mat-option *ngFor="let option of resultList">
      {{option.id}}
    </mat-option>
  </ng-container>
</mat-autocomplete>

可选优化：区分不同类型的结果 #

如果需要在模板里区分客户、商品、任务的结果（比如显示分类标签），可以在TS里给每个结果加类型标识：

// 调整mergeMap内的返回逻辑
return forkJoin([
  this.dataService.searchCustomer(res).pipe(map(items => ({ type: '客户', items }))),
  this.dataService.searchItem(res).pipe(map(items => ({ type: '商品', items }))),
  this.dataService.searchTask(res).pipe(map(items => ({ type: '任务', items })))
]);

对应的模板写法：

<mat-autocomplete #auto="matAutocomplete">
  <ng-container *ngFor="let group of list$ | async">
    <mat-optgroup label="{{group.type}}">
      <mat-option *ngFor="let option of group.items">
        {{option.id}}
      </mat-option>
    </mat-optgroup>
  </ng-container>
</mat-autocomplete>

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