如何对多个可观察对象进行排序

Question

我是 Angular2 和前端开发的新手，所以如果我错过了明显的答案，我深表歉意。

我正在开发一个 Angular2 应用程序。我不确定在我正在处理的组件中完成任务的最佳方式。

ngOnInit() {
    console.log("init component");
    console.log(this.activatedRoute);

    this.paramSub = this.activatedRoute.params.switchMap(
        (params: Params) => this.personSearchService.getPerson(params['personId']))
        .subscribe(result => this.personDetails = result);

    this.orgSub = this.personSearchService.getPersonFedOrgs(0).subscribe(
        results => this.orgs = results,
        error => console.log(error)
    );

    //pseudo-code
    watch this.orgs and this.personDetails
        if change
            do logic
}

在 OnInit 生命周期挂钩期间，我做了两件事，我获取并使用服务的路由参数，还从第二个服务获取组织列表。所有这些都运行良好。

我标记为伪代码的部分是我想要添加的功能。我想获取前两个服务调用的结果并执行一些业务逻辑。

我知道我不能直接使用 this.personDetails 和 this.orgs，因为它们是未定义的（直到异步调用得到解决）。所以我认为我需要将它们包装在一个 Observable 中，以便每次更新它们时我都可以执行一些逻辑。但我不完全确定如何做到这一点。任何指向正确方向的指针将不胜感激。

Answer 1

您可以使用cobmineLatest() 运算符。为了便于阅读，我对代码进行了一些重构：

personDetails$ = this.activatedRoute.params
  .map((params: Params) => params['personId'])
  .switchMap(id => this.personSearchService.getPerson(id))

orgs$ = this.personSearchService.getPersonFedOrgs(0)

Observable.combineLatest(personDetails$, orgs$)
  .subscribe(([details, orgs]) => {
    console.log(details, orgs);
  })

别忘了导入操作符：

import 'rxjs/add/observable/combineLatest';

Answer 2

CombineLatest 完成了这项工作，除了，如果任何一个流发出了任何值，它就会发出一个值，所以你不能确定当它们两个都实际发出值时你会收到通知。

为此，您需要压缩它们：d

    this.paramSub = this.activatedRoute.params.switchMap(
        (params: Params) => this.personSearchService.getPerson(params['personId']));

    this.orgSub = this.personSearchService.getPersonFedOrgs(0)


Observable.zip(this.paramSub, this.orgSub)
  .subscribe(result) => {
    console.log(result);
  })