如何使用带有Angular的字符串数组在HTML模板中显示具有3列的表格？

Question

我以数组形式获取数据，[ 'one', 'two', 'three', 'four', 'five', 'six']我想以表格格式显示如下，

    <table>
    <caption> Numbers:</caption>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr>
        <td>four</td>
        <td>five</td>
        <td>six</td>
    </tr>
    </table>

上面的模板可以使用ngFor＆动态生成ngIf吗？

因此，在每个（索引％3）= 0时，我们都将绘制新行，但是如何在带有angular指令的HTML中这样做呢？

这里的技巧是传入数组可以具有任意数量的字符串。

Answer 1

<table>
    <caption> Numbers:</caption>
    <ng-container *ngFor="let item of items; let i=index;">
        <tr *ngIf="i % 3 == 0">
            <ng-container *ngFor="let pos of [1, 2, 3]">
                <td *ngIf="i+pos < items.length">{{items[i+pos]}}</td>
            </ng-container>
        </tr>
    </ng-container>
</table>

我还没有测试过，但是应该这样做。