Angular

Question

您在路由到组件并加载 table 时遇到过问题吗？但是 table 是空的，没有数据。

我的意思是显示组件/ table。我看到的数据处于状态（会话存储）并已加载。如果我刷新页面，我可以显示它们。

顺便说一句，我可以在这个组件之前发送状态，我的问题可以得到解决，或者使用简单的服务调用 api。但这对我来说不是解决方案。

所以我的问题是=如何在查看之前显示/加载数据？

我的assets.state.ts

    @Action(SetDevice)
  async setDevice({ patchState, dispatch }: StateContext<DeviceDataModel>) {
    return await this.deviceListService.getData().subscribe((response: DeviceDataModel) => {
      console.log(response);
      patchState({
        data: response.data,
        dataSet: response.dataSet,
        offset: response.offset,
        size: response.size,
      });
      dispatch(new SetDeviceSuccess());
    });
  }

组件 - 将数据设置为状态并将它们加载到 table some.component.ts

ngOnInit(): void {
    this.store.dispatch(new SetDevice());
    this.getTableData();
  }

getTableData() {
    this.tableData = this.store.selectSnapshot(DeviceState.getDataDevice);
  }

some.component.html

 <dynamic-table
        style="width: 85%;"
        *ngIf="tableData"
        [tableData]="tableData.data"
        [tableColumns]="tableCols"
        [url]="'devicelist'"
      ></dynamic-table>

提前感谢您的帮助或想法。

Answer 1

很可能您调用 selectSnapshot 时您的数据尚未加载。你最好使用 @Select 语句：

@Select(DeviceState.getDataDevice)
readonly tableData$!: Observable<any>;

ngOnInit(): void {
  this.store.dispatch(new SetDevice());
}

并让您的模板使用 async 管道：

<dynamic-table *ngIf="tableData$ | async as tableData"
   [tableData]="tableData.data"
   [tableColumns]="tableCols"
   [url]="'devicelist'">
</dynamic-table>

除此之外，您的 @Action 处理程序也是错误的，这不是您使用 async/await 和 Observable 的方式。您需要 return 来自动作处理程序的 Observable，以确保当动作完成时，并且您订阅了调度，它会在那时完成：

@Action(SetAssets)
setWorkflows({ patchState, dispatch }: StateContext<AssetDataModel>) {
  return this.assetListService.getData().pipe(
    switchMap((response: AssetDataModel) => {
      patchState({
        data: response.data,
        dataSet: response.dataSet,
        offset: response.offset,
        size: response.size,
      });

      return dispatch(new SetDeviceSuccess());
    })
  )
}

Answer 2

问题是您在加载数据之前调用了 this.getTableData(); 函数。

some.component.ts

    @Select(state => state.youdata) yourdata$: Observable<any>;

    ngOnInit(): void {
        this.store.dispatch(new SetDevice()); 
     }

some.component.html

 <dynamic-table
            style="width: 85%;"
            *ngIf="tableData"
            [tableData]="tableData.data | async"
            [tableColumns]="tableCols"
            [url]="'devicelist'"
          ></dynamic-table>

Answer 3

我用 toPromise() 和 then() 解决了这个问题。我知道这不是最好的方法。但现在它的工作。

所以我只是用下面的代码替换了这段代码。

   ngOnInit(): void {
    this.store.dispatch(new SetDevice());
    this.getTableData();
  }

getTableData() {
    this.tableData = this.store.selectSnapshot(DeviceState.getDataDevice);

  }

首先我显示微调器，在收到数据后我只是隐藏微调器并显示 table 感谢 .then()

 ngOnInit(): void {
     this.store
      .dispatch(new SetAccount())
      .toPromise()
      .then((result) => {
       console.log(res);
       this.getTableData();
      });
}

Angular - NGXS 在查看前加载数据时出现问题

Angular - NGXS problem with loading data before view

ngxs

angular-state-managmement