0

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

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

顺便说一句，我可以在这个组件之前调度状态，我的问题可以得到解决，或者使用简单的服务来调用 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());
    });
  }

组件 - 将数据设置为状态并将它们加载到表 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>

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

4

3 回答 3

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/awaitObservable 的方式。您需要从操作处理程序返回 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());
    })
  )
}
于 2020-08-04T06:29:25.503 回答
0

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

一些.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>
于 2020-08-04T07:19:26.143 回答
0

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

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

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

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

  }

首先我显示微调器，在接收到数据后，我只是隐藏微调器并显示表格，这要归功于 .then()

 ngOnInit(): void {
     this.store
      .dispatch(new SetAccount())
      .toPromise()
      .then((result) => {
       console.log(res);
       this.getTableData();
      });
}
于 2020-08-13T05:48:52.997 回答