Последовательная работа с несколькими вложенными подписками (Angular, Rx Js)

Question

Мне нужно построить вложенный объект из результата трех наблюдаемых потоков и отобразить. Все три наблюдаемых возвращают массив, а два зависят от результата первого. Код, который у меня есть, выглядит следующим образом:

this.selectActiveFoos$.pipe(
  concatMap(foos => {
    return foos.map(foo => {
      let bars$ = this.barQuery.selectBarsByFooId(foo.id);  
      let bazs$ = this.bazQuery.selectBazsByFooId(foo.id); // these observables return Observable<T[]>
      return forkJoin([bars$, bazs$]).pipe(
        map(([bars, bazs]) => {
          return { 
            foo: foo,
            bars: bars,
            bazs: bazs
          }
        })
      );
    });
  })).subscribe(result => {
    console.log(result);
  });

}

IntelliSense сообщает мне, что тип результата такой, как ожидалось, т.е.

{ foo: foo, bars: bar[], bazs: baz[] }

, однако консоль записывает наблюдаемое в качестве вывода. Это меня реально кидает на ал oop. Я довольно долго искал в Интернете, но не могу найти ответа, который работает с вложенными массивами Observable .

Буду признателен за любой совет!

Answer 1

concatMap должен получить Observable, вы можете использовать forkJoin:

this.selectActiveFoos$.pipe(
  concatMap(foos => {
    return forkJoin(foos.map(foo => {
      let bars$ = this.barQuery.selectBarsByFooId(foo.id);  
      let bazs$ = this.bazQuery.selectBazsByFooId(foo.id); // these observables return Observable<T[]>
      return forkJoin([bars$, bazs$]).pipe(
        map(([bars, bazs]) => {
          return { 
            foo: foo,
            bars: bars,
            bazs: bazs
          }
        })
      );
    }));
  })).subscribe(result => {
    console.log(result);
  });
}