如何将来自两个 API 的数据合并到数据源中答案

【问题标题】：How can i combine data from two API's into datasource如何将来自两个 API 的数据合并到数据源中
【发布时间】：2019-09-27 01:30:30
【问题描述】：

我在 component.ts 中有两个不同的 api，我想将它们中的数据显示到我的 component.html 文件表中。我该怎么办？

this.dataSource.data = this.agentdata;
this.dataSource.data = this.ratingData;

Ì认为这会覆盖已经存在的数据。

我想要dataSource.data 中的两个数据，我可以轻松访问它。

【问题讨论】：

【解决方案1】：

首先合并您的流，然后将其转换为数据源。然后，您可以使用 async 管道将其绑定到您的 HTML。

datasource$ = forkJoin(
  this.api.callOne(),
  this.api.callTwo(),
).pipe(
  map([one, two] => new MatTableDatasource([...one, ...two])
);

在您的 HTML 中

<table mat-table [dataSource]="datasource$ | async">...</table>

作为旁注，Material 提供了高级别的抽象：您应该不自己与数据源交互（使用source.data = ...），而是每次都创建一个新的数据源。

【讨论】：

【解决方案2】：

您可以使用此代码：

this.dataSource.data=this.agentdata.concat(this.ratingData);

这将合并两个数组而不删除重复项。

【讨论】：