Angular-Multiples使用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

试试这个：

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

Answer 2

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

例如：

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