mat-table не отображает мой Observableпри использовании mergeMap

Question

Опубликовал хороший пример на stackBlitz: -)

https://stackblitz.com/edit/angular-f351cx

У меня возникли проблемы с объединением двух поисков базы данных в firebase в одну наблюдаемую, которая хорошо отображается в моей мат-таблице.

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

Я нахожу это очень странным, потому что, когда я асинхронизирую / JSON-канал, результат моего второго Observable, результат, кажется, имеет правильный формат.

Что я делаю не так?Мой пример использует http.get () и restcountries.eu, но на самом деле я пытаюсь заставить его работать с Firebase.Ошибка / поведение одинаково, как в моем собственном приложении, так и в этом примере.

Answer 1

Похоже, что когда вы вызываете return of(myArray), наблюдаемое завершается до того, как вы получите значение из второго http-запроса.

Если вы добавите .pipe(delay(100)); к нему, значение в таблице отобразится.

Код будет тогда:

this.singleObsDataSource = this.http.get('https://restcountries.eu/rest/v2/regionalbloc/efta')
this.doubleObsDataSource = this.singleObsDataSource.pipe(mergeMap((data: any[]) => {
  let myArray = [];
  data.forEach(country => {
    let url = 'https://restcountries.eu/rest/v2/name/' + country['name'];
    this.http.get(url).subscribe(countryInfo=>{
      myArray.push(countryInfo[0]);
    })
  })
  return of(myArray).pipe(delay(100));
}))

Рабочий стекблиц