angular2：模板中的嵌套循环不发出 HTML

Question

我的数据看起来像这样

this.data = [[1,2,3], [4,5,6]];

我想将每个值 1..6 放入 table 的 <td> 标签中。

我的问题是，外循环需要在某种标记内，但我不想破坏 HTML 结构。我目前的解决方案如下：

<table>
    <tr>
        <dummy *ngFor="let a of data;">
            <td *ngFor="let b of a;">
                {{b}}
            <td>
        <dummy>
    </tr>
</table>

没有与 <dummy> 关联的组件。

这行得通，但我怀疑这是执行此操作的预期方式。还有其他选择吗？

Answer 1

如果您不对 table 中的任何内容使用多维数组，那么对于此循环，您可以将数组展平并在展平的数组上使用一个 ngFor。

要展平数组，您可以执行以下操作：

this.flatData = [].concat.apply([], this.data);

然后您可以在 html:

中使用您的 flatData 属性

<table>
    <tr>
        <td *ngFor="let item of flatData">
            {{item}}
        <td>
    </tr>
</table>

Answer 2

您可以将 模板语法与 ngFor 一起使用，这不会破坏您的 HTML 结构，

演示：https://plnkr.co/edit/562hB7qNUhsv7mO6sRVV?p=preview

<table>
    <tr>

        <template ngFor let-a [ngForOf]="data" let-i="index">
            <td *ngFor="let b of a;">
                {{b}}
            <td>
        </template>

    </tr>
</table>

angular2：模板中的嵌套循环不发出 HTML

angular2: Nested loops in templates without emitting HTML

angular2-template

angular