Angular - 使用 RxJS 使用 foreach 多次调用 http

Question

这是我第一次在我的 Angular 项目中使用 RxJS。 我有足够的疑虑，需要一些帮助。

这是我的原始代码

loadOperations() {
    this.operationsListData = [];
    this.operationsList = [];
    this.operationsService.getOperations(this.selectedVariable).subscribe(data => {
      this.operationsData = data;
      if (data.length != 0) {
        const variablesOperations = this.operationsData.map(p => p.variable_operations);
        var arr = Object.getOwnPropertyNames(variablesOperations[0]);
        arr.forEach(clave => {
          var name = variablesOperations[0][clave];
          this.operationsService.getOperationsByUuid(variablesOperations[0][clave], clave).subscribe(
            data => {
              data.name = variablesOperations[0][clave];
              this.operationsListData.push(data);
            },
          );
        });
      }
    });
  }

getOperationsByUuid(operation: string, uuid: string): Observable<OperationList> {
    ...
    return this.http.get<OperationList>(url);
  }

getOperations(selectedVariables: any): Observable<Operations[]> {
    ....
    return this.http.get<Operations[]>(url);
  }

现在我已经使用了 RxJS。 这就是我目前所拥有的。 但是，它没有得到我需要的东西。 问题是 concatMap。 在我的原始代码中，我有一个遍历数组并调用服务的 foreach。 但是，我不知道如何在 RxJS 中制作那段代码或在返回中放入什么。

var variablesOperations;
const combined = this.operationsService.getOperationsByUuid(this.selectedVariable).pipe(
      switchMap(data => {
        this.operationsData = data;
        if (data.length != 0) {
          variablesOperations = data.map(p => p.variable_operations);
          var arr = Object.getOwnPropertyNames(variablesOperations[0]);
          console.log(arr);
          return of(arr)
        }
      }),
      //This is wrong and it is what I need help with
      concatMap((arrayClaves) => {
        arrayClaves.forEach( clave => {
          this.operationsListService.getOperationsByUuid(variablesOperations[0][clave], clave)
        })
        return null; 
      })
    )

combined.subscribe(
      data => {
        console.log(data);
      },
      err => {
        console.log(err);
      }
    );

总而言之，我需要知道如何使用 RxJS 执行我的原始代码的 foreach。 谁能帮我？

Answer 1

如果您只想在管道内调用或执行某些操作，则可以使用 tap()。

例如：

myObservable.pipe(
   tap(myValue => {
      console.log(myValue);
   }
);

Answer 2

尝试这个：

this.operationsService.getOperations(this.selectedVariable).pipe(
      tap(data => this.operationsData = data),
      filter(data => data.length != 0),
      map(data => data.map(p => p.variable_operations)),
      switchMap(variablesOperations => {        
        return forkJoin(Object.getOwnPropertyNames(variablesOperations[0]).map(clave => {
            return this.operationsService.getOperationsByUuid(variablesOperations[0][clave], clave).pipe(
                map(data => ({ ... data, name: variablesOperations[0][clave] })),
            );
        }));
      }),
    ).subscribe(operationsListData => this.operationsListData = operationsListData);