Angular html table 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 的内容：

但是当我尝试打印 table 时，我变得空 table。

您是否发现 priceRows 数组有任何问题？

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

Answer 1

通过 * ngIf (columns && subColumns && priceRows && priceRow) 添加验证到标记 table。

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

并在模板上验证日期

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

如果模板加载时存在数据，则一切正常

Answer 2

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>

Working Stackbiltz Demo

Angular html table ngfor 行问题

Angular html table ngfor for rows issue

angular

ngfor

angular8

angular-ngfor