Angular打开模态框报错：selectSnapshot返回值解构IdEvento为undefined

报错原因及解决方案 #

报错本质是this.store.selectSnapshot(CONTAINER_STATE_TOKEN)返回了undefined，导致无法解构属性IdEvento，核心问题有三个：

1. State注册/Token指向错误 #

首先确认两个点：

• 你是否在Ngxs的根模块或特性模块中，用@State装饰器正确注册了FormHistorialModel对应的状态
• CONTAINER_STATE_TOKEN是否和你注册的State完全匹配
  如果State未注册或者Token指向错误，selectSnapshot会直接返回undefined，触发报错。

2. 未将传入的IdEvento存储到State #

你当前的Action处理逻辑中，拿到ListarDatosHistorial的payload参数后，只调用接口加载列表数据，完全没有把传入的IdEvento存储到State中。哪怕selectSnapshot能正常拿到State，里面的IdEvento也只会是初始值null，后续的列表请求也会异常。
需要在Action处理方法中新增存储IdEvento的逻辑：

@Action(ContainerActions.ListarDatosHistorial)
asynclistarHistorial(
  ctx: StateContext<FormHistorialModel>,
  { payload }: ContainerActions.ListarDatosHistorial
) {
  // 新增：把传入的IdEvento存入State
  ctx.patchState({
    IdEvento: payload.IdEvento
  });
  this.listarHistorialSolicitudesBegin(ctx);
 
  return this.historialService.ListarHistorial(payload.IdEvento).pipe(
    tap(response => {
      this.listarHistorialSolicitudesSuccess(ctx)(
        response.data || []
      );
    }),
    catchError(err => {
      this.listarHistorialSolicitudesError(ctx)(err);
      return throwError(err);
    })
  );
}

3. 异步时序问题 #

你在handleListar方法中dispatch Action之后立刻打开模态框，模态框初始化就会调用loadGridHistorial。如果State更新还未完成，此时取值也会异常。
更稳妥的方案是打开模态框时直接把IdEvento作为入参传递，不需要走State中转：

handleListar(item: IGeneral) {
  // 打开模态框时传入IdEvento
  const dialogRef = this.dialogService.openXL(ModalHistorialCambiosComponent, {
    data: { IdEvento: item.nro }
  });    
}

模态框内通过MAT_DIALOG_DATA注入拿到IdEvento，直接用这个值发起列表请求，完全规避State取值的时序问题。

临时规避方案 #

可以先给selectSnapshot的返回值加兜底，避免直接报错：

private loadGridHistorial = () => {
  const state = this.store.selectSnapshot(CONTAINER_STATE_TOKEN);
  const IdEvento = state?.IdEvento;
  if (IdEvento) {
    this.store.dispatch(new ContainerActions.ListarDatosHistorial({ IdEvento }));
  }
}

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