Display Header table with sub columns from array - Angular

Question

I'm trying to display the data of this array to display the table header with two subcolumns.

What I want to achieve: [![enter image description here][1]][1]

Array

headerRows = [
        {
            id: 1,
            column: 'A',
            col1: 1,
            col2: 2,
        },
        {
            id: 2,
            column: 'B',
            col1: 1,
            col2: 2,
        },
        {
            id: 3,
            column: 'C',
            col1: 1,
            col2: 2,
        },
    ];

html

<table>
        <thead class="thead">
            <tr>
                <th class="text" rowspan = '2'>Text</th>
                <th *ngFor="let headerCell of headerRows" colspan = 2>{{headerCell.column}}</th>
            </tr>
            <tr>
                    <td *ngFor="let cell of headerRows">{{cell.col1}} </td>
                    <th *ngFor="let cell of headerRows">{{cell.col2}}</th>
            </tr>
        </thead>
</table>

Answer 1

Try this:

    <thead class="thead">
        <tr>
            <th class="text" rowspan = '2'>Text</th>
            <th *ngFor="let headerCell of headerRows" colspan = 2>{{headerCell.column}}</th>
        </tr>
        <tr>
          <ng-container *ngFor="let cell of headerRows">
            <td>{{cell.col1}} </td>
            <th>{{cell.col2}}</th>
          </ng-container>
        </tr>
    </thead>