在可观察订阅链完成后执行函数（Angular 2）

Question

我需要执行一个函数，该函数处理由一系列可观察订阅产生的数据，但仅在它完成创建我的对象之后。

这是我的链子：

 getFilters() {
        this.filterSvc.getCamps()
            .subscribe(
                c => {
                    this.filters = c;
                    for (let camp of this.filters) {
                        this.filterSvc.getBuildings(camp.id)
                            .subscribe(
                                b => {
                                    camp.buildings = b;
                                    for (let building of camp.buildings) {
                                        this.filterSvc.getFloors(building.id)
                                            .subscribe(f => {
                                                building.floors = f
                                            });
                                    };
                                });
                    }
                });
           // ONLY DO THIS AFTER THE OBJECT IS HYDRATED
           this.globals.setCampFilters(this.filters);
    }

如您所见，我需要从 getCamps 返回的每个项目创建一个订阅，并从每个结果中创建一个订阅，等等......然后说完，我想执行

setCampFilters(this.filters);

我如何才能等到我的所有营地都有建筑物并且所有这些建筑物都有楼层之后才去填充我的过滤器？

Answer 1

我会使用flatMap 运算符和Object.forJoin。这是一个示例：

getFilters() {
  this.filterSvc.getCamps()
        .flatMap(c => {
          this.filters = c;
          // Observables for all camps
          return Observable.forkJoin(this.filters.map(camp => {
            // Links camp with the result of getBuildings
            return Observable.forkJoin([
              Observable.of(camp),
              this.filterSvc.getBuildings(camp.id)
            ]);
          })
        })
        .map(results => {
          // Map results and link buildings with camps
          return results.map(result => {
            let camp = result[0];
            let buildings = result[1];
            camp.buildings = buildings;
            return camp;
          });
        })
        .subscribe(camps => {
          // ...
        ]);

请注意，您可以链接 flatMap 运算符。

您可能会对这篇文章感兴趣：

• http://restlet.com/blog/2016/04/18/interacting-efficiently-with-a-restful-service-with-angular2-and-rxjs-part-3/

Answer 2

window.getFilters = function() {
  this.filterSvc.getCamps()
  .do((c: any) => this.filters = c)
  .flatMap((c: any) => Observable.from(c))   // convert from Observable<Array<Camp>> to Observable<Camp>
  .flatMap((camp: any) => this.filterSvc.getBuildings(camp.id).do(b => camp.buildings = b))
  .flatMap(b => Observable.from(b))
  .flatMap((building: any) => this.filterSvc.getFloors(building.id).do(f => building.floors = f))
  .subscribe(null, null, () => this.globals.setCampFilters(this.filters));
}

一系列的flatMap将Observable从Observable>变成Observable>，你只需要在它的onComplete事件上调用this.globals.setCampFilters。

编辑：我更新了代码以阻止 Typescript 编译器抱怨不兼容的类型。我在我认为 TS 编译器会抱怨的地方添加 : any，您可以在每个 => 之前添加 :any