Angular 2：删除组件中的包装 DOM 元素

Question

我正在使用嵌套的数据编写一个 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

Answer 1

如果您将行组件包装在 ng-container 中，您应该能够完成它

<tbody>
    <ng-container *ngFor="let row of rows; let i = index">
       <data-row  [row]="row"></data-row>
    </ng-container>
</tbody>

@Component({
  selector: 'my-app',
  template: `
  <table>
    <ng-container *ngFor="let row of table">
      <tbody data-table-row [row]="row"></tbody>
    </ng-container>
  </table>
  `,
})
export class App {
  table = [

    {
      name: 'Parent', 
      children: [
        {
          name: 'Child 1'
          children: []
        },
        {
          name: 'Child 2'
          children: [
            {
              name: 'Grandchild 1'
              children: []
            }
          ]
        }
      ]
    }
  ]
}

@Component({
  selector: 'tbody[data-table-row]',
  template: `
    <tr><td>{{row.name}}</td></tr>
    <tbody *ngFor="let child of row.children" data-table-row [row]="child"></tbody>
  `
})
export class DataTableRowComponent {
  @Input() row: any;
}