等待foreach内部可观察到的几个rxjs，直到完成执行另一个

Question

• 我想通过checked_checkbox值循环
• 对于每一个，我都想做一个POST请求
• 然后，当foreach中的所有POST请求都完成时，我想获取刚刚查询到的数据

问题：

• 我的get函数与我的post函数是分开的，所以post查询没有完成，它完成了get，所以它导致了一个空的get，因为post还没有发布

解决方案：

将可观测值添加到数组中，然后将它们放在foreach末尾的forkJoin中。

我所看到的可能：

• 将observable转换为promise，然后使用异步等待，对此不太满意
• 可以使用forkJoin操作符来执行一些可观测值，并等待它们全部完成

我的API服务返回RxJs可观察性，我在Angular 8中，这里有两个函数：
首先是AddVacation((，它将发布一些数据，然后getAgentInSfihtDispo((将获取发布的数据。

addVacation() {
let counter = 0;
const shift_id = this.selectedShiftForMaincouranteModify;
const shift_date = this.modifyForm.value.dateDeb.format('YYYY-MM-DD');
this.api.sendGetRequest("/api/shift_dates/" + shift_date, true, null, null)
.subscribe((data) => {
this.agents_dispo_checked.forEach((agent) => {
const agent_id = agent.id;
if (data) {
this.api.sendPostRequest('/api/shift_dos', true, null,
{ shift_id: shift_id, shift_date: shift_date, agent_id: agent_id })
.subscribe();
} else {
this.api.sendPostRequest("/api/shift_dates", true, null, { date: shift_date })
.subscribe((data3) => {
if (data3.error === "L'association existe deja dans la base de données") {
this.api.sendPostRequest('/api/shift_dos', true, null,
{ shift_id: shift_id, shift_date: shift_date, agent_id: agent_id })
.subscribe();
} else {
this.api.sendPostRequest('/api/shift_dos', true, null,
{ shift_id: shift_id, shift_date: data3.date, agent_id: agent_id })
.subscribe();
}
});
}
counter++;
});
if (this.agents_dispo_checked.length === counter) {
this.isOpenSaisieVacation = false;
this.getAgentsInShiftAndDispo();
}
},
(err) => console.error(err));
}
getAgentsInShiftAndDispo() {
this.agentsInShift = [];
this.agents_dispo = [];
this.agentsInShiftSelectedFormArray.clear();
this.agentsDispoFormArray.clear();
if (this.selectedShiftForMaincouranteModify !== 0 &&
(this.modifyForm.controls.dateDeb.value !== "" || this.modifyForm.controls.dateDeb.value !== null || this.modifyForm.controls.dateDeb.value !== undefined)) {
const shift_id = this.selectedShiftForMaincouranteModify;
const goodFormatDate = this.modifyForm.value.dateDeb.format('YYYY-MM-DD');
this.api.sendGetRequest('/api/shift_dos/byShiftAndDate/' + shift_id + "/" + goodFormatDate, true, null, null)
.subscribe((data) => {
if (data) {
data.forEach((item) => {
this.agentsInShift.push(item.agent);
});
}
}, (err) => console.error(err),
() => {
this.agentsInShift.map((o, i) => {
const control = new FormControl(true); // if first item set to true, else false
this.agentsInShiftSelectedFormArray.push(control);
});
const difference = this.agentsMaintenance.filter((obj) => {
return !this.agentsInShift.some((obj2) => {
return obj.id === obj2.id;
});
});
this.agents_dispo = difference;
this.agents_dispo.map((o, i) => {
const control = new FormControl(false); // if first item set to true, else false
this.agentsDispoFormArray.push(control);
});
});
}
}

提前感谢您引导我进入RxJs运营商的大世界。

Answer 1

您必须将所有Observable推送到一个数组中，并使用forkJoin。

private observables = [];
addVacation() {
let counter = 0;
const shift_id = this.selectedShiftForMaincouranteModify;
const shift_date = this.modifyForm.value.dateDeb.format('YYYY-MM-DD');
this.api.sendGetRequest("/api/shift_dates/" + shift_date, true, null, null)
.subscribe((data) => {
this.agents_dispo_checked.forEach((agent) => {
const agent_id = agent.id;
if (data) {
this.observables.push(this.api.sendPostRequest('/api/shift_dos', true, null,
{ shift_id: shift_id, shift_date: shift_date, agent_id: agent_id }));
} else {
this.observables.push(this.api.sendPostRequest("/api/shift_dates", true, null, { date: shift_date })
.subscribe((data3) => {
if (data3.error === "L'association existe deja dans la base de données") {
this.observables.push(this.api.sendPostRequest('/api/shift_dos', true, null,
{ shift_id: shift_id, shift_date: shift_date, agent_id: agent_id }));
} else {
this.observables.push(this.api.sendPostRequest('/api/shift_dos', true, null,
{ shift_id: shift_id, shift_date: data3.date, agent_id: agent_id }));
}
});
}
counter++;
});
if (this.agents_dispo_checked.length === counter) {
this.isOpenSaisieVacation = false;
forkJoin(this.observables)
.subscribe(val => this.getAgentsInShiftAndDispo());
}
},
(err) => console.error(err));
}
getAgentsInShiftAndDispo() {
this.agentsInShift = [];
this.agents_dispo = [];
this.agentsInShiftSelectedFormArray.clear();
this.agentsDispoFormArray.clear();
if (this.selectedShiftForMaincouranteModify !== 0 &&
(this.modifyForm.controls.dateDeb.value !== "" || this.modifyForm.controls.dateDeb.value !== null || this.modifyForm.controls.dateDeb.value !== undefined)) {
const shift_id = this.selectedShiftForMaincouranteModify;
const goodFormatDate = this.modifyForm.value.dateDeb.format('YYYY-MM-DD');
this.api.sendGetRequest('/api/shift_dos/byShiftAndDate/' + shift_id + "/" + goodFormatDate, true, null, null)
.subscribe((data) => {
if (data) {
data.forEach((item) => {
this.agentsInShift.push(item.agent);
});
}
}, (err) => console.error(err),
() => {
this.agentsInShift.map((o, i) => {
const control = new FormControl(true); // if first item set to true, else false
this.agentsInShiftSelectedFormArray.push(control);
});
const difference = this.agentsMaintenance.filter((obj) => {
return !this.agentsInShift.some((obj2) => {
return obj.id === obj2.id;
});
});
this.agents_dispo = difference;
this.agents_dispo.map((o, i) => {
const control = new FormControl(false); // if first item set to true, else false
this.agentsDispoFormArray.push(control);
});
});
}
}