How to combine 3 database observers without losing dynamic updates

Question

I have 3 parallel lights. And I need to join them as one object. Code as below:

import {Http} from "@angular/http";
import {AngularFireDatabase} from "angularfire2";
import {Thread} from "../model/thread";
import {Message} from "../model/message";
import {Participant} from "../model/participant";

constructor(private  http: Http, private db:AngularFireDatabase) { }

loadUserThreads(uid): Observable<AllUserData> {
return Observable.forkJoin([
  this.db.list('participant/' + uid + '/threads').first(),
  this.db.list('participant/' + uid + '/messages').first(),
  this.db.list('participant/' + uid + '/participants').first()
])
  .map((data:any[]) => {
    let threads: Thread[] = data[0];
    let messages: Message[] = data[1];
    let participants: Participant[] = data[2];
    let AllUserData = {
      threads: threads,
      messages: messages,
      participants: participants
    }
    return AllUserData;
  })
  }

This work and returns the exact format that I need, which is in this interface:

export interface AllUserData {
  participants: Participant[];
  threads: Thread[];
  messages: Message[];
}

The problem is that forkJoin will not work without .first () of all observable firebase objects. And if I use .first () to complete all the monitored databases, I LOST the dynamic updates, because of which I use firebase in the first place. How can I get the best from the world? - Save the observed data about the bomb, but can you join them as my interface format? I pull my hair on it. Any help would be appreciated!

Answer 1

.forkJoin(...) .combineLatest(...).

map:

Observable.combineLatest(
  this.db.list('participant/' + uid + '/threads'),
  this.db.list('participant/' + uid + '/messages'),
  this.db.list('participant/' + uid + '/participants')
)
.map(([threads, messages, participants]: [Thread[], Message[], Participant[]]) =>
  ({ threads, messages, participants })
)