角度:串联和并联组合Observable

时间:2018-03-26 15:15:39

标签: angular typescript rxjs observable angular5

我在使用JSON显示数据时遇到问题。我有一个主要的JSON,如下所示:

"providers": [
  {
    "id": "1",
    "name": "name1",
    "data": "http://localhost:3001/name1"
  },
  {
    "id": "2",
    "name": "name2",
    "data": "http://localhost:3001/name2"
  }
]

需要调用数据字段中的url以获取另一个JSON文件(detail-info),该文件包含有关特定元素的更多信息。

我现在创建了一个服务,它应该加载来自detail-info的所有数据,并将其安全地保存在providers.data中。我现在对我得到的反应完全感到困惑。有人可以澄清或解释我在这方面做错了什么吗?以下是代码片段:

export interface Provider {
  id: string;
  name: string;
  data: any;
}

export interface Providers {
  providers: Provider[];
}

// service.ts:

getListelements() {

        return this.http.get<Providers>(this.url)
          .map((res) => res)
          .map((providers) => {
            if (providers.providers.length > 0) {

              return Observable.forkJoin(
                providers.providers
                  .map((provider: Provider) => {
                  return this.http.get(provider.data)
                    .map((res) => {
                      providers.providers.data = this.mapElement(res);
                      return providers;
                  });
                })
              );
            }
            return Observable.of(providers);
          })
          .share();
      }

// component.ts

getListelements(): void {
    this.listelementService.getListelements().subscribe(
      data => { this.data = data;},
      err => this.messageService.add(err)
 });
  }

.flatMap.concatMap我的输出错误地返回

"providers": [
      {
        "id": "1",
        "name": "name1",
        "data": "http://localhost:3001/name1"
      },
      {
        "id": "2",
        "name": "name2",
        "data": "http://localhost:3001/name2"
      },
      "data": {"id":"1", "name":"name1", "furtherinfo":"lorem ipsum"}
    ]

1 个答案:

答案 0 :(得分:2)

您只使用map(),其投影函数返回一个Observable(Observable.forkJoin),但您想订阅此Observable并获得其结果,而不是进一步传递Observable。

因此,您应使用map()concatMap()而不是mergeMap()switchMap在这种情况下也会有用。)

return this.http.get<Providers>(this.url)
  .map((res) => res)
  .concatMap((providers) => {
    return Observable.forkJoin(...) ;
  });

编辑:

const observables = providers.providers
  .map((provider: Provider) => this.http.get(provider.data)
    .map(response => {
      provider.data = this.mapElement(response);
      return provider;
    })
  );

return Observable.forkJoin(observables)