HttpClient进入角度后加载多个元素

时间:2018-09-27 15:24:49

标签: angular rxjs

所以我有以下来自API的JSON。

$banner = [];
$key = __CLASS__ . '::generateAdQueue()' . serialize($params);
if (Yii::$app->mutex->acquire($key, 1)) {
    $banner = $this->getBanner($params);
    Yii::$app->mutex->release($key);
}

最后我想用API调用的全部项目结束。

所以我在考虑做

  • 通过httpClient.get调用API以接收初始JSON
  • 使用rxjs运算符对每行的所有项目id进行forkJoin
  • 将所有内容结合在一起,最终得到如下所示的JSON。

    [{   “ groupName”:“ someName”,   “ groupDescription”:“ someDescription”,   “ items”:[{{id:“ id1”,名称:“ item1 name”},{id:“ id2”,名称:“ item2 name”}] }]

我正在努力寻找正确的运算符以这种方式合并所有内容。

1 个答案:

答案 0 :(得分:2)

您可以将forkJoin结果映射到原始响应中。例如以下内容:

this.httpClient.get(...)
  .pipe(
    mergeMap(response => {
      const observables = response.items.map(id => this.httpClient.get(`.../${id}`));

      return forkJoin(...observables).pipe(
        map(items => {
          response.items = items;
          return response;
        }),
      );
    }),
  )
  .subscribe(...)

也许您会想在第一个mergeAll之后立即使用this.httpClient.get(...)来展平响应,在此响应中,每个对象将作为单独的发射发出。然后在并使用toArray()制作一个大型对象数组。