angular2：嵌套循环在模板中不排放HTML

Question

我的数据看起来像这样

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

，我想就把每个值1..6在表中的<td>标签。

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

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

没有与<dummy>相关组件。

这可行，但我怀疑这是做到这一点的预期方式。任何替代品？

Answer 1

您可以使用的模板语法与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> 

Answer 2

如果你没有使用多维数组作为表中的任何东西，那么对于这个循环，你可以压平数组，并在扁平数组上使用一个ngFor。

要扁平化，你可以这样做数组：

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

然后，您可以使用您的flatData财产在html：

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