如何将 2 个 FirebaseListObservables 合并为一个 observable答案

【问题标题】：How to merge 2 FirebaseListObservables into one observable如何将 2 个 FirebaseListObservables 合并为一个 observable
【发布时间】：2017-12-11 20:01:25
【问题描述】：

我有 2 个 Firebase 列表：

publicItems 包含 4 个项目
privateItems 包含 2 个项目

我想从这两个列表中提取并将它们组合成一个 observable。

为此，我正在尝试使用 merge：

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/merge';

items: Observable<any[]>;
this.items = this.af.list('/privateItems').merge(this.af.list('/publicItems'));

然后在视图中：

<ul>
   <li *ngFor="let item of items | async">item.title</li>
</ul>

但是，这具有仅显示 4 个公共项目的效果。

merge 是不是合适的工具？我将如何将 2 个 FirebaseListObservables 合并为 1 个可以一起显示的 Observable？

【问题讨论】：

正确。你可以试试Observable.merge( ___ , ____ ) 。也可以试试this.af.list('/privateItems').do(console.log).merge(this.af.list('/publicItems')).do(console.log)
使用 Observable.merge( __, __) 具有相同的效果。似乎无论哪个可观察到的都是第二个“覆盖”另一个。例如，如果我用 publicItems 交换对 privateItems 的调用，那么它只显示 2 个私有项目。 @Skeptor
你有没有尝试第二个语句

标签： angular typescript firebase-realtime-database rxjs ionic3

【解决方案1】：

试试这个

this.items = Observable.combineLatest(
    this.af.list('/privateItems'),
    this.af.‌list('/publicItems'),
    (privateItems, publicItems)=> {
      console.log(privateItems); 
      console.log(publicItems); 
      return [...privateItems, ...publicItems]
    }
);

或

this.items = this.af.list('/privateItems')
   .flatMap(privateItems=> this.af.list('/publicitems')
        .map(publicItems=> [...privateItems, ...publicItems])
   );

更新

我知道你的情况。你得到两个响应的流：

-----[privateItems] -------- [publicItems]-----

所以 this.items 获得第一个响应值，然后它被第二个响应值覆盖。但是根据您的要求，您需要将它们都放在一起，因此使用reduce 可能会有所帮助。

this.items = this.af.list('/privateItems')
       .merge(this.af.list('/publicItems'))
       .reduce((total,current)=>[...total,...current],[]);

【讨论】：

太棒了！从理论上讲，合并应该类似地工作吗？
应该，让我用合并也这么想
更新了我对你失败的原因

【解决方案2】：

很抱歉恢复旧帖子，但这是我组合可变数量的 FirebaseListObservables 的解决方案：

let rooms = ['room1', 'room2', 'room3'];
let observables = rooms.map((room) => { return this.cs.getMessagesByRoomId(room) });

this.messages = Observable.combineLatest(
  observables,
  (...rooms) => {
    console.log('rooms',Array.prototype.concat(...rooms));
    return Array.prototype.concat(...rooms)
  }
);

【讨论】：