Question

在我的Angular6应用程序中，我有一个效果，该效果首先获取用户ID，然后为每个ID进行2个API调用：getName和getAge。理想情况下，我希望按ID分组接收数据：第一个ID是第一个数据，第二个是ID，依此类推。例如：[[Anna，18]，[Max，22]]。

如何实现？我以为zip运算符可以提供帮助，但找不到正确的方法。在下面的代码中，尽管断点会触及进行调用的两个函数，但API调用不会发生。

@Effect()
loadAllNames$: Observable<Action> = this.actions$.ofType(allUsersActions.LOAD_ALL_NAMES)
    .pipe(
        concatMap(action => {
            return this.apiService.getUserIds()
        }),
        switchMap(ids => {  // [ 3423, 1222, 43234, 1232];
            let observableBatch = ids.map(id => {
              this.apiService.getName(id),  // brekpoint hits this fn
              this.apiService.getAge(id) // brekpoint hits this fn
            })
            return zip(observableBatch)
            .pipe(
                switchMap((res) => {
                    this.store.dispatch(new allUsersActions.SetAllUsers(res));
                    return of(
                        new spinnerActions.HideSpinner()
                    )
                }),
                catchError(error => of(new spinnerActions.HideSpinner()))
          )
        })
    )

API服务：

  public getName(id): Observable<any> {
    return this.http.get<any[]>(URL + id)
  }

Answer 1

这只是内部salary":[{ "bills":[{"electricity":300,"milk":500}, {"electricity":240,"milk":200}, {"electricity":800,"milk":900}] }]，它将接连执行switchMap，并一次运行两个调用。

id

实时演示：https://stackblitz.com/edit/rxjs-85y3bv

Angular 6：对数组的每个元素进行2次api调用

1 个答案: