小编Jos*_*osh的帖子

我正在使用嵌套的数据编写一个 HTML 表格组件，这样输出可能如下所示：

<table>
  <tr><td>Parent</td></tr>
  <tr><td>Child 1</td></tr>
  <tr><td>Child 2</td></tr>
  <tr><td>Grandchild 1</td></tr>
</table>

我想使用递归组件来创建它，如下所示：

<table>
  <data-row *ngFor="let row of rows" [row]="row"></data-row>
</table>

数据行：

<tr><td>{{row.name}}</td></tr>
<data-row *ngFor="let child of row.children" [row]="child"></data-row>

然而，这会在表格行周围添加一个环绕元素，这会破坏表格并且是无效的 HTML：

<table>
  <data-row>
    <tr>...</tr>
    <data-row><tr>...</tr></data-row>
  </data-row>
</table>

是否可以删除此data-row包装元素？

一种解决方案：

一种解决方案是使用<tbody data-row...></tbody>我目前正在做的事情，但这会导致嵌套tbody元素，这违反了W3C规范

其他想法：

我尝试过使用ng-container，但似乎不可能，<ng-container data-row...></ng-container>所以这是不可能的。

我也考虑过放弃使用表格，但是使用 HTML 表格是允许将数据简单复制到电子表格中的唯一方法，这是一项要求。

我考虑的最后一个选择是在生成表之前展平数据，但是，由于树可以随意展开和折叠，这会导致过度重新渲染或非常复杂的模型。

编辑：这是我当前解决方案的 Plunk（违反规范）：http://plnkr.co/edit/LTex8GW4jfcH38D7RB4V ?p=preview