Как я могу объединить данные из двух API в источник данных

Question

У меня есть два разных API в component.ts, и я хочу отобразить данные из них в мою 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>

В качестве идентификатора, Материал обеспечивает высокий уровень абстракции: вы должны не взаимодействовать с источником данных самостоятельно (с source.data = ...), а создавать каждый раз новый источник данных.

Answer 2

Вы можете использовать этот код:

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

, это объединит два массива без удаления дубликатов.