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

У меня есть два разных API в component.ts, и я хочу отображать данные из них в моей файловой таблице component.html. Как я могу сделать?

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

Я думаю, что это перезапишет уже имеющиеся данные.

Мне нужны оба данных в dataSource.data, и я могу легко получить к ним доступ.


material-design angular
person Loveena Bansal    schedule 09.05.2019    source источник
comment
Предоставьте минимально воспроизводимый пример.   -  person    schedule 09.05.2019
comment
можете ли вы опубликовать свой код как часть вопроса   -  person Sathiraumesh    schedule 09.05.2019
comment
вы можете использовать rxJs forkjoin для того же. stackoverflow.com/questions/55878352/   -  person Yash Rami    schedule 09.05.2019

Ответы (2)


arrow_upward
2
arrow_downward

Начните с объединения потока и преобразования его в источник данных. Затем вы можете использовать канал 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 = ...), а вместо этого каждый раз создавать новый источник данных.

person Community    schedule 09.05.2019

arrow_upward
0
arrow_downward

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

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

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

person Mohammadreza Imani    schedule 09.05.2019