如何在使用[displayWith]的自动完成功能中管理异步操作？

Question

在我的Angular响应式表单中，我集成了一个自动完成组件。我的需求是展示 myObject.name 作为用户可见的内容，而实际绑定的表单值使用的是 myObject.id。但是，当表单预先填充了现有值时，我需要根据 myObject.id 获取对应的 myObject.name，这个过程耗时，导致自动完成组件最初显示的是ID而非名称。目前我还没能解决这个问题。

我尝试过使用Observable来处理，但似乎 displayWith 方法并不直接支持Observable类型。请问有什么方法可以实现我的需求吗？

TypeScript代码片段：

public displayWith(id: string): string {
    if (!id) {
        return '';
    }
    let freespinName = ''; 
    this.freespins$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(freespins => {
        const found = freespins.find((freespin: Freespin) => freespin.id === id);
        freespinName = found?.name || id;
    });

    return freespinName;
}

HTML代码片段：

Freespin


    
        {{freespin.name}}

rdelmar · Answer

在 ngOnInit 生命周期钩子中编写此代码，并且我们需要在 displayWith 方法内部发起API调用。

注意：以下是一个伪代码示例，但你可以参考这种方法来尝试解决你的问题！

export class SomeComponent {

    nameIdMap = {}; // 创建一个用于存储id与name映射的对象
    
    ngOnInit() {
        // 在组件初始化时订阅数据流，一次性获取所有freespins并构建映射关系
        this.freespins$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(freespins => {
            this.nameIdMap = {}; // 初始化映射对象，确保每次数据更新时映射关系重新构建
            // 遍历freespins数组，为每个对象创建id到name的映射
            freespins.forEach((freespin: any) => {
                this.nameIdMap[freespin.id] = freespin.name;
            });
        });
    }
    
    displayWith(id: string): string {
        // 根据id从映射表中直接获取name，这样可以即时返回name，无需等待异步调用
        return this.nameIdMap[id] || id; // 如果找不到对应id的name，则返回id本身作为兜底
    }

}

Ignacio Vazquez-Abrams · Answer

如果你正在使用 Angular 16 或更高版本，你可以在该场景下利用 Signals。

private freespins = toSignal(this.freespins$);

displayFn(id: string): string {
    return this.freespins()!.find((freespin) => freespins.name === id)?.name || '';
}

你也可以这样返回一个函数：

displayFn(): (id: string) => string {
    return (id: string) =>
      this.freespins()!.find((freespin) => freespins.name === id)?.name ||
      '';
}

如果 this.freespins$ 是 BehaviorSubject，你可以直接获取其值而无需订阅：

private freeSpins$ = new BehaviorSubject(this.options);
displayFn2(user: User): string {
    return (
        this.freeSpins$
            .getValue()!
            .find((freespin) => freespins.name === user.name)?.name || ''
    );
}

还有另一种解决方案，通过返回一个函数并结合使用 async 管道：

在 TypeScript 文件中：

displayFn3(spins: User[] | null): (user: User) => string {
    return (user: User) =>
        spins?.find((freespin) => freespins.name === user.name)?.name || '';
}

在 HTML 文件中：


    {{option.name}}

查看此示例以获取更多灵感：
StackBlitz 示例

APC · Answer

尽管@Hussein AbdElaziz 提供的答案利用 Signals 可能也能够解决问题，但此问题实际是通过改变组件中获取 freeSpins$ 的方式得到解决的。我们不再从仓库中调取它，而是作为父组件的一个输入参数传递过来，这样做解决了异步问题。