Angular-查看前加载数据的NGXS问题

在路由到组件并加载表时是否遇到问题。但表是空的，没有数据

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

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

因此，我的问题是=如何在查看之前显示/加载数据

我的资产.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());
    });
  }

some.component.html

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

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

---

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

当您调用

selectSnapshot

时，您的数据很可能尚未加载。使用

@Select

语句更好：

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

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

除此之外，您的

@Action

处理程序也是错误的，这不是您使用

async/await

和observatable的方式。您需要从操作处理程序返回observatable，以确保当操作完成并订阅分派时，它将在以下时间完成：

@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());
    })
  )
}

@Action（SetAssets）
setWorkflows（{patchState，dispatch}:StateContext）{
返回此.assetListService.getData（）管道(
switchMap（（响应：AssetDataModel）=>{
补丁状态({
数据：response.data，
dataSet:response.dataSet，
offset:response.offset，
大小：response.size，
});
返回分派（新SetDeviceSuccess（））；
})
)
}

问题是在加载数据之前调用了

this.getTableData（）；

函数

一些

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

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

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

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

@Select（state=>state.youdata）yourdata$：可观察；
ngOnInit（）：void{
this.store.dispatch（new SetDevice（））；
}

some.component.html

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

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

---

我用toPromise（）和then（）解决了这个问题。我知道这不是一个最好的过程。但现在它可以工作了

所以我简单地用下面的代码替换这个代码

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

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

  }

首先，我显示微调器，在收到数据后，我只需隐藏微调器并显示表格，这要感谢.then（）

---

您好，这不是答案。但为了回答您，我希望您尝试一下。您能用

setTimeout（（）=>{this.getTableData（）；}，2000）；

@mfuaturoĞLU替换

this.getTableData（）；

吗？

this.store.dispatch（新的SetDevice（））.subscribe（（）=>{this.getTableData（）；}）

你能告诉我这是否适合你作为答案来写吗？@Poul Kruijt的答案对于你想要如何用可观测数据来构造你的状态是正确的。我不清楚的是，你正在调用

SetDevice

上的dispatch，但不是等待它在加载表数据之前完成-但状态代码是指

SetAssets

（不同的操作）所以我不知道设备和资产是如何联系在一起的。我发布了不同的状态，我的错误。但两者都是一样的。只有不同的名称和接口。不，这个答案对我不起作用……在我刷新页面之前，表是空的。到目前为止，唯一的解决方案是设置超时，这似乎不是最好的方法。谢谢你这么做me建议，但结果仍然是一样的。我将得到空表，并且只有在我刷新页面时才会显示数据。Screenschot:@DanielVágner然后问题出现在您的

动态表中
组件不工作。到目前为止，唯一的解决方案是使用setTimeout，如果您接受setTimeout作为问题的答案，或者您正在搜索另一个answ呃？我正在寻找一个更好的解决方案。在使用setTimeout之前。如果有更好的解决方案……你能试试这个
[tableData]=“tableData.data | async”
？除了上面的注释，我已经更新了答案。