Angular - проблема NGXS с загрузкой данных перед просмотром

Question

Сталкивались ли вы с проблемой при переходе к компоненту и загрузке таблицы. Но таблица без данных пуста.

Я имею в виду, что компонент / таблица отображается. Данные, которые я вижу, находятся в состоянии (хранилище данных) и загружены. Я могу отобразить их, если обновлю sh страницу.

Кстати, я мог бы отправить состояние до этого компонента, и моя проблема могла бы быть решенным или использовать простой сервис с вызовом на api. Но это не решение для меня.

Итак, моя проблема = как я могу отображать / загружать данные перед просмотром?

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

Component - установить данные в состояние и загрузить их в таблицу 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. Вам нужно вернуть 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

Я решаю эту проблему с помощью toPromise (), а затем (). Я знаю, что это не лучший пример. Но теперь он работает.

Поэтому я просто заменяю этот код на код ниже.

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

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

  }

Прежде всего, я показываю счетчик, а после получения данных просто скрываю счетчик и отображаю таблицу благодаря. затем ()

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

Answer 3

Проблема в том, что вы вызываете функцию 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>