Угловой |Подписаться на несколько наблюдаемых

Question

Я пытаюсь создать список событий, на которые собирается пользователь.Сначала я получаю ключи событий, а затем хочу подписаться на каждое событие и прослушивать изменения.В настоящее время работает только последнее событие, потому что this.eventRef изменяется в цикле for.

eventRef: AngularFireObject<any>


getEvents() {

const eventsGuestsLookup = this.db.object(`eventsGuestsLookup/${this.uid}`).valueChanges()

this.eventsGuestsLookupSub = eventsGuestsLookup
  .subscribe(eventKeys => {

    if (eventKeys) {
      console.log(eventKeys)
      for (const k in eventKeys) {
        if (eventKey.hasOwnProperty(k)) {

          this.eventRef = this.db.object(`events/${k}`)

          console.log(this.eventRef)

          this.eventRef.snapshotChanges().subscribe(action => {

            const key = action.payload.key
            const event = { key, ...action.payload.val() }

           this.makeEvents(event)

          })
        }
      }
    }
  })

}

Далее я получаю ответ пользователя и для каждого статуса, который хочуотображать определенную информацию.Я не знаю другого способа сделать это, поэтому я проверяю оба списка attending и notAttending и, если есть ответ от пользователя, я изменяю свойства события.

makeEvents(event) {
console.log(event)

event.goingText = "RSVP"
event.setGoing = 'rsvp'
event.setColor = "rsvp-color"

const attending = this.db.object(`attendingLookup/${this.uid}/${event.key}`).valueChanges()

this.attendingLookupSub = attending
  .subscribe(data => {
    console.log('attending', data)
    if (data) {
      event.goingText = "ATTENDING"
      event.setGoing = 'thumbs-up'
      event.setColor = 'attending-color'
    }
  })

const notAttending = this.db.object(`not_attendingLookup/${this.uid}/${event.key}`).valueChanges()

this.notAttendingLookupSub = notAttending
  .subscribe(data => {
    console.log('not attending', data)
    if (data) {
      event.goingText = "NOT ATTENDING"
      event.setGoing = 'thumbs-down'
      event.setColor = 'not-attending-color'
    }
  })

this.events.push(event)

}

*** Редактировать

const eventsGuestsLookup = this.db.object(`eventsGuestsLookup/${this.uid}`).valueChanges()
eventsGuestsLookup.subscribe(keys => {
  of(keys).pipe(
    mergeMap(keys => {
      Object.keys(keys).map(k => {
        console.log(k)
      })
      return merge(Object.keys(keys).map(k => this.db.object(`events/${k}`)))
    })
  ).subscribe(data => console.log('data', data))
})

Answer 1

то, что вы хотите достичь, - это плоская коллекция наблюдаемых.чтобы добиться этого, вы можете сделать что-то вроде этого:

//Dummy eventKeys observable.
const obs1$ = new BehaviorSubject({key:1, action: 'lorem'});
const obs2$ = new BehaviorSubject({key:2, action: 'lorem'});
const obs3$ = new BehaviorSubject({key:3, action: 'lorem'});

const eventKeys = {
  obs1$,
  obs2$,
  obs3$
};
// Dummy eventsGuestsLookup observable.
of(eventKeys)
.pipe(
  //eventsGuestsLookup dispatch collection of obserbable, we want to flat it.
  mergeMap(ev => {
    // We merge all observables in new one.
    return merge(...Object.keys(ev).map(k => ev[k]));
  }),
).subscribe(console.log);

примечание : ev[k] является наблюдаемым объектом.В вашем случае вы должны сделать что-то вроде:

.map(k => this.db.object(`events/${k}`)) // will return observable.

live demo