尝试在Angular 2项目中将多个observable合并为一个
发布时间:2020-12-17 17:42:15 所属栏目:安全 来源:网络整理
导读:我试图了解RxJs中的Observables.我有一个页面,我需要显示特定网站的所有用户. User和SiteUser实体位于不同的API端点中.我有以下端点 userService.getSiteUsers(siteId: string): ObservableSiteUser[]; 哪里 export class SiteUser { site_id: string; user_
我试图了解RxJs中的Observables.我有一个页面,我需要显示特定网站的所有用户. User和SiteUser实体位于不同的API端点中.我有以下端点
userService.getSiteUsers(siteId: string): Observable<SiteUser[]>; 哪里 export class SiteUser { site_id: string; user_id: string; } 和 userService.getUser(user_id: string): Observable<User>; 哪里 export class User { id: string; name: string; email: string; .... } 所以我必须做以下事情: >调用siteUsers API以获取特定站点的所有用户ID 我可以轻松地做到这一点 let users: User[] = []; // this is bound in html view to a table this.userService.getSiteUsers("my site id") .subscribe((siteUsers) => { for (let siteUser of siteUsers) { this.userService.getUser(siteUser.user_id) .subscribe((user) => { users.push(user); }); } }); 但这种方法感觉很脏或很麻烦.我确信有一种更清晰的Observable方法.我是Observables的新手,但据我所知,我应该可以做这样的事情(不是selectMany和mergeAll函数只是我的猜测,我尝试过它并没有用,我甚至找不到selectMany在rxjs库)) 获取站点用户可观察数组 – >对于可观察数组中的每个元素,创建用户可观察 – >将它们全部合并到可观察的用户数组中 – >订阅,所以像这样: this.userService.getSiteUsers("my site id") .selectMany((siteUser) => this.userService.getUser(user)) .mergeAll() .subscribe((users) => { this.users = users; }); 有人可以帮助,我不能让它工作 编辑 – – – 也许这样的事情 this.userService.getSiteUsers("my site id") .switchMap( (siteUsers) => { let userQueries: Observable<User>[] = []; for (let siteUser of siteUsers) { userQueries.push(this.userService.getUser(siteUser.user_id)); } return Observable.forkJoin(userQueries); } ) .subscribe((users) => { this.users = users; }); 解决方法
如果一个http调用依赖于另一个http调用,则应使用.flatMap()/ .mergeMap()运算符.
例如在你的情况下这样的事情会做, this.userService.getSiteUsers("my site id") .switchMap( (siteUsers) => { let userQueries: Observable<User>[] = []; for (let siteUser of siteUsers) { userQueries.push(this.userService.getUser(siteUser.user_id)); } return Observable.forkJoin(userQueries); } ) .subscribe((users) => { this.users = users; }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- angularjs – ngChange在值之前触发使其超出隔离范围
- 专家观察 | 肖力:“OpenStack政企专享云运维实践”
- TLPI UNIX linux系统编程手册源代码运行
- Vim命令删除除选定行之外的所有行
- 使用httpInterceptor和AngularJS 1.1.5实现加载旋转器
- 如何在shell脚本中捕获SQLPlus退出代码?
- Bootstrap WPF Style(二)--Glyphicons 字体图标
- Unix-最快的方式来判断两个文件是否相同?
- angularjs – 当检查$pristine或$setDirty()时,为什么要在n
- scala – 具有返回未来功能的遍历列表和流