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

问题描述

这是我第一次在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。谁能帮我吗？

解决方法

如果您只是想在管道内打电话或做某事，可以使用tap（）。

例如：

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

,

尝试一下：

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);