Angular 7 将数据添加到 http 请求的结果

Question

我得到了一组 ID（资产 ID），并使用这些 ID 来获取数据。 对于每个 http 请求，我都会收到一个或多个数据集。 我想将请求 ID 添加到每个数据集，然后返回数据。

获取和返回数据工作正常，但我不知道如何将该资产 ID 添加到数据集。

当我像下面的代码片段那样做时，我只得到每个 ID 的第一个数据集。 （当然......因为[0]）。 但是如何迭代所有数据集？

getData(assetIds: Array<string>): Observable<any> {
  const data = assetIds.map(assetId => {
    // for each assetId
    const path = this.serverUrl + '?' + 'assetid=' + assetId;
    return this.httpClient.get(path).pipe(
      map((res: any[]) => {
        return {
          name: res[0].name,
          type: res[0].type,
          asset: assetId
        };
    }));
});

// return combined result of each assetId request
return forkJoin(data);
}

我还尝试了以下操作，但是在执行此操作时我没有得到任何数据：

getData(assetIds: Array<string>): Observable<any> {
 const data = assetIds.map(assetId => {
  // for each assetId
  const path = this.serverUrl + '?' + 'assetid=' + assetId;
  return this.httpClient.get(path).pipe(
    map((res: any[]) => {
      const resultArray = [];
      res.forEach(element => {
        const row = {
          name: res[element].name,
          type: res[element].type,
          asset: assetId
        };
        resultArray.push(row);
      });
      return resultArray;
    }));
});
// return combined result of each assetId request
return forkJoin(data);

}

Answer 1

你的第二个方法似乎很好。 我相信问题在于您使用的是rxjs运算符forkJoin 。

正如 RXJS 文档所说，当

当所有 observable 完成后，从每个 observable 发出最后发出的值。

您基本上有 2 个选项，将操作符forkJoin更改为zip

在所有 observable 发出后，将值作为数组发出

或者在pipe上的map之后添加take(1)运算符。 Take 操作符将在发出 1 个值后完成 observable，允许forkJoin发出它的值

Answer 2

您也可以在结果数组上使用map 。 像这样的东西：

const data = assetIds.map(assetId => {
    // for each assetId
    const path = this.serverUrl + '?' + 'assetid=' + assetId;
    return this.httpClient.get(path).pipe(
      map((res: any[]) => res.map(item => {
        return {
          name: item.name,
          type: item.type,
          asset: assetId
        }
      })));
  });

  // return combined result of each assetId request
  return forkJoin(data);
}

Answer 3

感谢您的回复。 我尝试了所有方法，但我想问题是我使用“元素”作为数组中的索引。 下面的代码现在工作得很好：

return this.httpClient.get(path)
  .pipe(
    map((datasets: AssetFilesTableItem[]) => {
      const result: AssetFilesTableItem[] = [];
      let i = 0;
      datasets.forEach(element => {
        const dataset: AssetFilesTableItem = {
          name: datasets[i].name,
          type: datasets[i].type,
          size: datasets[i].size,
          timestamp: datasets[i].timestamp,
          created: datasets[i].created,
          updated: datasets[i].updated,
          asset: assetId
        };
        result.push(dataset);
        i++;
      });

      return result;
    }));