Fork 加入两个 firebase observable

Question

我正在使用 angular2fire。我正在查询并试图从一个城市获得所有旅行。

getAllTours(cityId) {
    return this.af.database.list(`/cities/${cityId}/tours`)
        .map((tours): any => {
            tours.map((tour: any) => {
                tour.tour  = this.af.database.object(`/tours/${tour.$key}/tours`)
            });
            return tours;
        })
}

如果我 console.log 旅游对象，我得到一个数组 "FirebaseObjectObservable"。

我必须遍历所有 FirebaseObjectObservable，才能获取实际数据。

我想知道我是否可以 forkJoin 所有 observables 并使用单个订阅函数将输出作为数组获取。

这是正确的做法吗？

我知道我可以在所有观察者数组上做一个异步管道，但我想在控制器中获取数据，然后在它显示在视图中之前做一些处理，所以异步管道真的不是最好的我的解决方案。

Answer 1

是的，forkJoin 可用于获取内部 observables 的数据：

getAllTours (cityId) {
    return this.af.database
        .list(`/cities/${cityId}/tours`)
        .mergeMap((tours) => {

            // The array of tours is going to be mapped to an observable,
            // so mergeMap is used.

            return Observable.forkJoin(

                // Map the tours to the array of observables that are to
                // be joined. Note that forkJoin requires the observables
                // to complete, so first is used.

                tours.map((tour) => this.af.database
                    .object(`/tours/${tour.$key}/tours`)
                    .first()
                ),

                // Use forkJoin's results selector to match up the result
                // values with the tours.

                (...values) => {
                    tours.forEach((tour, index) => { tour.tour = values[index]; });
                    return tours;
                }
            );
        });
}

使用 forkJoin 是否正确取决于您的要求。

使用上面的代码，getAllTours 返回的 observable 将不会发出值，直到所有内部 observable 都完成 - 也就是说，直到查找了每个城市的游览。这可能会影响 感知的 性能 - 如果 /cities/${cityId}/tours 中的信息可以在查找 /tours/${tour.$key}/tours 中的信息之前显示，您将无法展示下。同样，您将无法在结果到达时显示该城市的游览。

使用 forkJoin 使处理实现更简单，但可能会使 UI 感觉更慢。（但是，您可能不希望对 UI 进行零星更新。）

请注意，如果您确实需要在每个城市的游览显示在视图中之前对其进行一些处理，您可以在您问题的代码中对可观察对象执行上述处理。例如，使用您的 getAllTours 函数：

observable = getAllTours(someCityId);
observable.map((tours) => {

    tours.forEach((tour) => {

        // With your function, tour.tour is an observable, so map
        // could be used to process the values.

        tour.tour = tour.tour.map((value) => {

            // Do some processing here with the value.
        })

        // And, if you are not interested in dynamic updates, you could
        // call first.

        .first();
    });
    return tours;
});

然后您可以在模板中使用 async 管道，它会接收您处理过的游览。

Fork 加入两个 firebase observable

Fork join two firebase observables

observable

firebase

firebase-realtime-database

rxjs5

angular