[英]How to make forEach wait for subscribe to finish?
我正在使用Angular 6,而我的数据库是Firebase。 现在,我尝试根据房间的建筑物显示每个房间的名称。 例如:
Building A
Room 1
Room 2
Building B
Room 1
Room 2
但是每次尝试时,它将首先显示所有建筑物名称,然后才显示房间的名称。 这是我现在得到的:
Building A
Building B
Room 1
Room 2
我发现发生这种情况是因为forEach
一直跳过subscribe
功能。
我尝试使用promise
和await
,但是它不起作用。 也许是因为我使用错误的方式? 我不太确定如何以正确的方式使用promise
。
async loadData(){
this.navigationService.user
.subscribe( user => {
console.log(user);
this.user = user;
this.navigationService.getBuildings(this.user.orgId)
.subscribe( building => {
this.navMasterBuilding = [];
this.buildings = building;
this.buildings.forEach( async building2 => {
this.completeBuildingId = building2.completeBuildingId;
this.buildingName = building2.buildingName;
console.log(building2.buildingName);
await new Promise ((resolve, reject) => {
this.navigationService.getLocation(this.user.orgId, this.completeBuildingId)
.subscribe(location => {
console.log('room' + location);
this.navMasterLocation = [];
});
resolve();
});
});
});
});
}
我试图通过使用setTimeout来延迟它,但是它仍然不起作用。
Array.forEach
仅适用于同步功能。 将其更改为使用有效的for...of
语法。 接下来,您可以在对getLocation
的调用已完成并且subscribe
的代码已运行之前resolve
Promise
。 更改代码以在getLocation.subscribe
调用resolve
。
for(const building2 of buildings) {
console.log(building2.buildingName);
await new Promise ((resolve, reject) => {
this.navigationService.getLocation(this.user.orgId, this.completeBuildingId)
.subscribe(location => {
console.log('room' + location);
this.navMasterLocation = [];
resolve();
});
});
}
请注意,它可以简化为:
for(const building2 of buildings) {
console.log(building2.buildingName);
const location = await this.navigationService.getLocation(this.user.orgId, this.completeBuildingId).toPromise();
console.log('room' + location);
this.navMasterLocation = [];
}
还要注意,我不太确定为什么要使用this.completeBuildingId
而不是局部变量。 鉴于它在每次迭代中都会被覆盖,这对我来说似乎没有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.