如何在Angular Autocomplete中用displayWith处理异步数据？

你的核心问题是displayWith是同步函数，无法等待异步请求完成后返回结果，当前代码里订阅freespins$的逻辑赶不上函数返回，最终只能返回初始空值或ID。下面是具体的解决方案：

步骤1：提前缓存ID与名称的映射 #

在组件里维护一个ID到名称的映射表，异步数据加载完成后填充这个表，让displayWith可以同步获取名称。

修改后的TypeScript代码：

import { Component, OnInit, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Observable } from 'rxjs';

interface Freespin {
  id: string;
  name: string;
}

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  private freespinIdToNameMap = new Map<string, string>();
  freespins$: Observable<Freespin[]>;
  yourForm: FormGroup; // 你的响应式表单实例
  filteredFreespins: Observable<Freespin[]>[]; // 你的过滤后数据源

  constructor(private destroyRef: DestroyRef) {}

  ngOnInit(): void {
    // 订阅数据源，填充ID-名称映射表
    this.freespins$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(freespins => {
      this.freespinIdToNameMap.clear();
      freespins.forEach(freespin => {
        this.freespinIdToNameMap.set(freespin.id, freespin.name);
      });
      // 数据加载完成后，触发表单控件更新，让displayWith重新执行
      this.yourForm.get('rewardId')?.updateValueAndValidity({ onlySelf: true, emitEvent: false });
    });
  }

  public displayWith(id: string): string {
    if (!id) {
      return '';
    }
    // 从映射表取名称，取不到就返回ID作为降级显示
    return this.freespinIdToNameMap.get(id) || id;
  }
}

步骤2：保持HTML代码基本不变 #

HTML代码只需确保displayWith绑定正确，无需额外修改：

<mat-form-field>
  <mat-label>Freespin</mat-label>
  <input type="text"
         placeholder="Select a freespin"
         matInput
         formControlName="rewardId"
         [matAutocomplete]="auto">
  <mat-autocomplete requireSelection #auto="matAutocomplete"
                    [displayWith]="displayWith.bind(this)">
    <mat-option *ngFor="let freespin of filteredFreespins[i] | async"
                [value]="freespin.id">
      {{freespin.name}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

关键逻辑说明 #

1. 映射表缓存：把异步加载的Freespin数据转换为ID到名称的映射，让displayWith可以同步获取数据，避免异步等待问题。
2. 触发控件更新：异步数据加载完成后，调用updateValueAndValidity触发表单控件的变化检测，确保displayWith重新执行，此时映射表已有数据，就能显示正确名称。
3. 降级处理：如果映射表里找不到对应ID（比如数据未加载完成或ID无效），直接返回ID，保证显示不会空白。

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