How to display dynamic data and dynamic header on angular 7

[ahmedsaazizba]

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<any>('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>