无法解构“this.store.selectSnapshot”的属性“IdEvento”

问题描述

嗨，我试图在按下按钮时显示一个模态，但出现以下错误“错误类型错误：无法解构 'this.store.selectSnapshot (...)' 的属性 'event id'，因为它是未定义的.”会发生什么？

这个方法应该打开模态

  handleListar(item: IGeneral) {
    this.store.dispatch(new FormActividadSolContainerActions.ListarDatosHistorial({ IdEvento: item.nro }));
    const dialogRef = this.dialogService.openXL(ModalHistorialCambiosComponent);    
  }

这是错误行

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

我的模型

export class FormHistorialModel {  
  title = 'Detalle Del Historial';   
  gridHistorial: { loading: boolean; deFinition: IDataGridDeFinition; source: IDataGridSource<any> } = {
    loading: false,deFinition: {
      columns: [
        { label: 'Numero de Evento',field: 'idEvento' },{ label: 'Nombre de Evento',field: 'nombreEvento' },{ label: 'Tipo de Evento',field: 'tipoEvento' },{ label: 'Fecha del Cambio',field: 'fechaCambio' },{ label: 'Cambio y Motivo',field: 'cambioyMotivo' },{ label: 'Usuario',field: 'usuario' },]
    },source: {
      items: [],page: 1,pageSize: 10,total: 0
    }
  };
  formType = FormType.CONSULTAR;
  IdEvento: number = null;    
}

动作

  export class ListarDatosHistorial {
    static readonly type = '[FORM-ACTIVIDAD-SOL-CONTAINER] ListarDatosHistorial';
    constructor(public payload: { IdEvento: number }  ) { }
  }

状态

  listarHistorialSolicitudesBegin = (
    ctx: StateContext<FormHistorialModel>
  ) => {
    const state = ctx.getState();
    ctx.patchState({
      gridHistorial: {
        ...state.gridHistorial,loading: true
      },});
  }

  listarHistorialSolicitudesSuccess = (
    ctx: StateContext<FormHistorialModel>
  ) => (items: any[]) => {
    const state = ctx.getState();
    ctx.patchState({
      gridHistorial: {
        ...state.gridHistorial,loading: false,source: {
          ...state.gridHistorial.source,items,pageSize: items.length,total: items.length,}
      },});
  }

  listarHistorialSolicitudesError = (
    ctx: StateContext<FormHistorialModel>
  ) => (error) => {
    const state = ctx.getState();
    ctx.patchState({
      gridHistorial: {
        ...state.gridHistorial,loading: false
      },});
  }

  @Action(ContainerActions.ListarDatosHistorial)
  asynclistarHistorial(
    ctx: StateContext<FormHistorialModel>,{ payload }: ContainerActions.ListarDatosHistorial
  ) {
    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);
      })
    );
  }

服务

解决方法

我将首先放入断点/调试器语句，然后查看您的快照返回的内容：

private loadGridHistorial = () => {
    const state = this.store.selectSnapshot(CONTAINER_STATE_TOKEN);
    debugger; // now inspect the state variable
    this.store.dispatch(new ContainerActions.ListarDatosHistorial({ IdEvento }));
  }

如果它不起作用，则尝试将状态令牌更改为状态类名称 this.store.selectSnapshot(ContainerState);

,

我不是 100% 肯定，但我相信 selectSnapshot 只返回整个状态对象的回调。然后，您需要指向您想要的状态，以获得您正在寻找的值。

来自ngxs.io/concepts/select#snapshot-selects的示例

@Injectable()
export class JWTInterceptor implements HttpInterceptor {
  constructor(private store: Store) {}

  intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
    const token = this.store.selectSnapshot<string>((state: AppState) => state.auth.token);
    req = req.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });

    return next.handle(req);
  }
}