NgRx：加载项目列表，并在每个加载项目之后它们的状态答案

【问题标题】：NgRx: load list of items, and after for each load item them statusNgRx：加载项目列表，并在每个加载项目之后它们的状态
【发布时间】：2022-07-23 02:49:41
【问题描述】：

我想分两步向用户显示项目列表。首先是对 API 的单个请求中的简单列表。然后当它完成后，通过对 API 的多个请求一个一个地加载每个项目的状态。第一个列表很容易获得，另一方面，每个项目对状态的调用要长得多。我使用 Angular 13 + NgRx。我想知道正确的方法。这是我所在的位置，但它不起作用。

效果：

getDatafacts$ = createEffect(() => this.actions$.pipe(
ofType(DataFactActions.GET_QUEUE_START),
switchMap((action) => {
  return this.apiService.callApi("GET", "neotimo/datafact/getdatafactqueue", null)
    .pipe(
      map(result => {

        const queue = <DataFactQueueResult>result;
        queue.dataFactItems.forEach((item) => {
          this.apiService.callApi("GET", "neotimo/datafact/getdatafactitem", item.id.toString())
            .subscribe(
              value => DataFactActions.GET_QUEUE_UPDATESTATUS({ payload: <DataFactItemResult>value })
            )
        });
        
        return DataFactActions.GET_QUEUE_SUCCESS({ payload: queue });
      }),
      catchError(errorRes => {
        switch (errorRes.status) {
          case 403:
          case 401:
            return of(DataFactActions.GET_QUEUE_FAIL({ payload: [this.errorAccessDenied] }));
          case 404:
            return of(DataFactActions.GET_QUEUE_FAIL({ payload: [this.error404] }));
          case 400:
            return of(DataFactActions.GET_QUEUE_FAIL({ payload: [errorRes.error.errors[0].message] }));
          default:
            return of(DataFactActions.GET_QUEUE_FAIL({ payload: [this.errorOccured] }));
        }
      })
    )
}))

减速机：

【问题讨论】：

标签： angular ngrx

【解决方案1】：

尝试创建并返回一个数组，其中包含您想要调度的所有操作，例如this example。该数组应包括来自 foreach 的所有 DataFactActions.GET_QUEUE_UPDATESTATUS({ payload: <DataFactItemResult>value } 以及 DataFactActions.GET_QUEUE_SUCCESS({ payload: queue });

现在我认为你只调度这个动作：

DataFactActions.GET_QUEUE_SUCCESS({ payload: queue });

【讨论】：