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

Question

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

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

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

我希望同时拥有dataSource.data中的两个数据，并且可以轻松访问它们。

Answer 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 = ...），而应该每次都创建一个新的数据源。

Answer 2

您可以使用以下代码：

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

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