如何解决角嵌套订阅代码无法按预期工作
我的任务包括2个步骤。第一步是从Firestore检索一些ID数据。其次是根据第一步中检索到的数据检索名称数据。因此,我为每个步骤使用了1个订阅。在我正在执行console.log()的代码中,正确的结果出现了,但是当网页加载时,下拉列表为空。
this.MessagingService.recieveGetClient().subscribe(idData => {
this.dropdownList = [];
idData.map((id: string,i: number) => {
this.VehicleService.getOwnerInfo(id).subscribe(namedata => {
this.dropdownList.push({ item_id: `${i}`,doc_id: namedata['username'] });
console.log("this.dropdownList:",this.dropdownList);
});
});
});
下面是HTML代码。如果我摆脱了第二个订阅,并使用id代替了dropdownList的用户名,那么它将起作用。但是我需要使用用户名。
<ng-multiselect-dropdown
[settings]="dropdownSettings"
[placeholder]="'Send Message to...'"
[data]="dropdownList"
[(ngModel)]="selectedItems"
(onSelect)="onItemSelect()"
(onSelectAll)="onSelectAll($event)"
(onDeSelect)="onItemDeSelect()"
(onDeSelectAll)="onDeSelectAll()"
>
</ng-multiselect-dropdown>
解决方法
由于它具有多个订阅和映射数据,因此最好使用可观察对象通过switchMap传递不同的源,如下所示:
this.dropdownList$ = this.MessagingService.receiveGetClient()
.pipe(switchMap(id => this.VehicleService.getOwnerInfo(id).pipe(map(nameData => ({id,doc_id: nameData.username})))
));
在模板中,您可以使用异步管道解包值
[data]="dropdownList$ | async"
请注意,由于异步管道将进行订阅,因此您无需手动订阅组件,也不必担心取消订阅。
希望这会有所帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。