Как условно итерировать данные по значению заголовка?

Question

Я пытаюсь создать таблицу данных, в которой у меня есть заголовки столбцов, на итерации я печатаю по 4 раза каждый, поскольку длина заголовка равна 4. Как предотвратить или напечатать только один раз с помощью условных выражений?

вот мой заголовок:

cols = [
    {
      field:"name", header:"Name",

    },
    {
       field:"description", header:"Description",

    },
    {
       field:"age", header:"Age",

    },
    {
       field:"category", header:"Category"
    }
  ]

вот мой шаблон:

<table>
  <thead>
    <tr> 
      <th *ngFor="let col of cols; let x = index">{{x}} {{col.header}}</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let col of  values.header; let x = index">
      <ng-container *ngFor="let val of values.data; let i = index">
        <tr> 
          <td>{{x}} {{val[values.header[x].field]}}</td> prints 4 times
          <td>{{x}} {{val[values.header[x].field]}}</td> prints 4 times
          <td>{{x}} {{val[values.header[x].field]}}</td> prints 4 times
          <td>{{x}} {{val[values.header[x].field]}}</td> prints 4 times

        </tr>
     </ng-container>
    </ng-container>
  </tbody>
  <tfoot>
    <tr>
    <td colspan="4" align="center">footer</td>
    </tr>
  </tfoot>
</table>

Live Demo