Угловая html таблица ngfor для выдачи строк

Question

У меня есть этот HTML для 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>

Это содержимое для priceRows, для которых я пытаюсь сделать строки:

Но я получаю пустую таблицу при попытке распечатать таблицу.

Видите ли вы что-то не так в массиве для priceRows?

URL-адрес Stackblitz: https://angular -bnxfca.stackblitz.io

Answer 1

TS:

priceRows: any[] = [];

Попробуйте:

<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>

Рабочая демонстрация Stackbiltz

Answer 2

Добавить проверку через * ngIf (столбцы && subColumns && priceRows && priceRow) в таблицу тегов.

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

и проверить дату в шаблоне

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

, если существуют данные при загрузке шаблона, все будет хорошо