如何让组件等待NgRx SignalStore中的方法执行完成

问题核心在于你的changeStatus方法虽标记了async，但内部用subscribe处理Observable时，并未等待异步操作完成就返回，导致组件代码直接继续执行后续逻辑。要让组件能等待该方法完成，需将Observable转换为Promise并正确等待其执行。

修改Store代码 #

使用RxJS的firstValueFrom（替代已废弃的toPromise）将HTTP请求的Observable转为Promise，让async方法能正确等待异步操作完成：

import { firstValueFrom } from 'rxjs'; // 导入firstValueFrom

export const OperationStore = signalStore(
  withState(operacaoStoreInitialState),
  withMethods((store, service = inject(OperationService)) => ({
    changeStatus: async (id: string, statusId: string) => {
      try {
        console.log('2');
        const data = await firstValueFrom(service.changeStatus(id, statusId));
        // ...some logic
        patchState(store, (state) => ({ data, loading: false }));
        console.log('3');
      } catch (e) {
        // ...error logic
      }
    }
  })),

修改Component代码 #

将onFinalizar标记为async，并用await等待changeStatus方法执行完成：

async onFinalizar(id: string, statusId: string) {
  this.finalizandoOperacao = true;
  this.habilitarBotoes = false;
  console.log('1');
  await this.operacaoStore.changeStatus(id, statusId);
  console.log('4');
  // 此处逻辑会在changeStatus执行完成后运行
}

说明 #

• firstValueFrom会订阅Observable并等待第一个值发出，随后转为Promise；若Observable出错，Promise会被reject，进入try/catch的catch块处理。
• 通过await等待changeStatus这个async方法，组件后续代码（如console.log('4')）会在异步操作完成后才执行，控制台输出顺序将变为1、2、3、4。

内容的提问来源于stack exchange，提问作者Marcelo de Sá