Angular html table ngfor for rows issue

Question

I have this html for Angular:

<table>
                <thead>
                    <tr>
                        <th *ngFor="let col of columns">
                            {{col}}
                        </th>
                    </tr>
                    <tr>
                        <th *ngFor="let col of subColumns">
                            {{col}}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let priceRow of priceRows">
                    <td *ngFor="let price of priceRow">
                        {{price}}
                    </td>
                </tr>
                </tbody>    
            </table>

This is the content for priceRows for which I'm trying to do rows:

But I'm getting empty table when trying to print out the table.

Do you see anything wrong in the array for priceRows?

Stackblitz url: https://angular-bnxfca.stackblitz.io

Answer 1

Add validation through * ngIf (columns && subColumns && priceRows && priceRow) to tag table.

<table *ngIf="colums && subcolums...">

and validate Date on template

{{columns|json}}
{{subColumns |json}}

if data exist on template load, all will be fine

Answer 2

TS:

priceRows: any[] = [];

Try this:

<table>
    <thead>
        <tr>
            <th *ngFor="let col of columns">
                {{col}}
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of subColumns">
                {{col}}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let price of priceRows">
            <td *ngFor="let item of price">
                {{item}}
            </td>
        </tr>
    </tbody>
</table>

Working Stackbiltz Demo