angular - 等待 foreach 中可观察的几个 rxjs 直到完成执行另一个
问题描述
- 我想遍历checked_checkboxes 值。
- foreach 我想做一个 POST 请求。
- 然后,当 foreach 中的所有 POST 请求完成后,我想获取刚刚查询的数据。
问题:
- 我的 get 函数与我的 post 函数是分开的,所以 post 查询没有完成并且它执行 get 所以它是一个空的 get 结果,因为该帖子尚未发布。
解决方案:
将 observables 添加到数组中,然后将它们放入 foreach 末尾的 forkJoin 中。
我所看到的可能:
- 将 observable 转换为 promise,然后使用 async await,对此不太满意
- 可以使用 forkJoin 操作符来执行一些 observables 并等待它们完成。
我的 API 服务返回 RxJs observables,我在 Angular 8 中,这里有两个函数:首先是 AddVacation(),它将发布一些数据,然后 getAgentsInSfihtDispo() 将获取发布的数据。
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 运营商的广阔世界。
解决方案
您必须将所有 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);
});
});
}
}
推荐阅读
- c++ - 何时删除用于计算的临时值(智能指针)(获取其范围)?
- php - Smarty 时不时地返回一个空结果
- azure - 从 Visual Studio Code 部署 Azure Functions 时是否可以指定要使用的容器映像?
- python - 使用 Python 直接向 USB 发送信号
- css - 在 vmin 单元中设置的边框导致间隙
- python - 如何关闭输入的数字?
- angular - Rxjs 链接,怎么做?
- python - 几张带有填充的图像上的相同 RandomCrop 如何获取参数?
- r - 在 for 循环中进行相同的合并,而不是重复代码
- java - 如何将磁场 X、Y、Z 值从设备更改为世界参考系