Print table using two ngFor loop

Question

Dear all,

 

Hope you are doing well. I was developing one component using Angular 7 and ASP .net MVC with REST api. Table code :-

<table class="table">
   <tr>
     <th>#</th>
     <th>Game</th>
     <th>Platform</th>
      <th>Release</th>
    </tr>
     <tr *ngFor="let game of games; let i = index">
          <td>{{i + 1}}</td>
          <td>{{game.game}}</td>
          <td>{{game.platform}}</td>
          <td>{{game.release}}</td>
      </tr>
</table>

How can I print this data more dynamically l mean if I have get headers which I want am bringing from database.

 

what I have tried is that :-

<table class="table">
   <tr>
     <th>#</th>
     <th *ngFor="let header of headers;">
         {{ header['HeaderName'] }}
     </th>
    </tr>
     <tr *ngFor="let game of games; let i = index">
          <td>{{i + 1}}</td>
          <td>{{game[i][header]}}</td>
      </tr>
</table>

Here I am able to see table headers only not table data.

 

How can I overcome on above problem.

 

Thanking you in advance.

Regards.