How to display dynamic data and dynamic header on angular 7

Question

How to handle component.html headers and data in case of data and header columns changed every time ?

I work on angular app give it report id then it returned different result depend on report id

so may be if i pass reportid =1 it display

FinancialId FinancialName FinancialDate
1                   cash           12/01/2020

if I pass reportid=2 then it display

InventoryId InventoryName InventoryQty InventoryPrice
 1                  Stor1                 10                50

then it return data different and column headers different based on report id

so How to display this data dynamically on html component .

service.ts

export class DisplayreportService
{
constructor(private http : HttpClient) { }
GetReportDetailsByReportId(id : string){
return this.http.get('http://localhost:61265/api/report/Getreportdetails/id=' + id) .map(res=>res); } }

on reportdetails.component.ts

reportdetailslist: any[];
 constructor(private router: ActivatedRoute, private _displayreport: DisplayreportService) { }
ngOnInit() {
const paramIndex = window.location.href.indexOf('id=');
 if (paramIndex > 0) { let param = window.location.href.substring(paramIndex);
 let param1 = param.split('&')[0];
let param2 = param.substr(param.indexOf('=') + 1);
this._displayreport.GetReportDetailsByReportId(param2).subscribe((data: any[]) => { this.reportdetailslist = data; });

How to show data on component.html below

<div> <table class="table table-hover" >
 <thead>
 <tr>
<th>
i dont know table header returned
</th>
</tr>
 </thead>
<tbody>
<tr *ngFor="let rep of reportdetailslist">
        idont know columns returned
</tr>
</tbody>
 </table>