angular - mat-table 不会呈现我的 Observable使用mergeMap时

Question

在 stackBlitz 上发布了很好的示例 :-)

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

我在将 firebase 中的两个数据库查找组合成一个可以很好地呈现到我的 mat-table 中的单个 observable 时遇到了一些麻烦。

我走得很远。我可以通过返回 observable 来获得一个数据库查找以显示在表中，但是一旦我尝试连接第二个，表中没有任何显示。

我觉得这很奇怪，因为当我将第二个 Observable 的结果进行异步/JSON 管道传输时，结果似乎具有正确的格式。

我究竟做错了什么？我的示例使用 http.get() 和 restcountries.eu，但我实际上是在尝试使其与 Firebase 一起使用。但是，在我自己的应用程序和本示例中，错误/行为是相同的。

标签： angularangular-materialobservablerxjs6

Answer 1

看起来当您return of(myArray)在从第二个 http 请求中获取值之前调用 observable 完成。

如果添加.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));
}))

工作堆栈闪电战