在Angular的forEach循环中，如何等待subscribe中的代码完成，然后再进行下一次迭代

Question

在下面的代码中，我有一个for循环，其中一个API正在被调用。我希望第一个API调用完成，订阅内的代码首先完全执行，然后for循环的下一次迭代将开始，下一次迭代将触发API调用。

但是目前api是以并行模式执行的。但是我希望api以顺序的方式执行。

parentLevelIdArray.forEach(parentLevelId => {
this.locModService.deleteAPI(parentLevelId, levelObj.id)
.subscribe((response) => {
if (response.status === 200) {
this.message = 'Image uploaded successfully';
this.getSublevels();
this.getAllLinkedLevel();
} else {
this.message = 'Image not uploaded successfully';
}
}
)
});

我已经检查了其他stackoverflow链接，但没有得到我的情况下的实际答案。请帮助。

Answer 1

我要做的是把它变成一个可观察对象数组，如下所示:

const tasks = parentLevelIdArray.map((parentLevelId) => this.locModService.deleteAPI(parentLevelId, levelObj.id))

这样，您可以使用concat函数按顺序执行此操作:

concat(tasks).subscribe((response) => {
if (response.status === 200) {
this.message = 'Image uploaded successfully';
this.getSublevels();
this.getAllLinkedLevel();
} else {
this.message = 'Image not uploaded successfully';
}
}

Answer 2

我已经用递归方法解决了这个问题。

调用者方法——

let lastIndex = parentLevelIdArray.length - 1;
this.recursiveDelete(parentLevelIdArray, levelObj, lastIndex);

调用方法——

recursiveDelete(parentLevelIdArray, levelObj, lastIndex) {
if(lastIndex >= 0) {
this.locModService.deleteAPI(parentLevelIdArray[lastIndex], levelObj.id)
.subscribe((response) => {
//console.log("Inside subscribe()...");
if (response.status === 200) {
this.message = 'Image uploaded successfully';
this.getSublevels();
this.getAllLinkedLevel();
lastIndex = lastIndex - 1;
this.recursiveDelete(parentLevelIdArray, levelObj, lastIndex);
} else {
this.message = 'Image not uploaded successfully';
}
}
)
}
}