TR 子组件内的 Angular2 FormGroup

我有一个*ngFor我需要用 FormGroup 包装的表中的子行组件。像这样的东西。

<tr [formGroup]='dependentForm'>
  <td>
    <input type="text"  formControlName="first_name">
  </td>
  <td>
    <input type="text"  formControlName="last_name">
  </td>
  <td>
    <input type="text" formControlName="dob">
  </td>
</tr>

但我无法弄清楚如何从父模板加载组件而不弄乱标题列对齐。

我尝试过使用元素选择器和属性选择器，但无论哪种方式似乎都存在障碍。如果我使用属性选择器，<tr dependent-row>，并删除tr从孩子那里我就无法将任何东西包裹在我的周围inputs 分配一个formGroup否则会弄乱列。如果我使用元素选择器<dependent-row></dependent-row>并把tr在子组件内部（如上面的示例），这只会让表格变得更糟，只列出所有tr是内联的。

我希望我已经足够好地描述了我的问题。感谢您的关注！

UPDATE

这是使用属性选择器的示例。这tr中的标签dependent-row组件正在丢弃表格列，但我需要一些东西来添加formGroup所以我不知道如何正确处理这个问题。

https://plnkr.co/edit/oXxkUGKtVp0T1u4Qz8AX?p=preview https://plnkr.co/edit/oXxkUGKtVp0T1u4Qz8AX?p=preview

这是使用元素选择器的替代方法。

https://plnkr.co/edit/qSLP5kVPLIWYdT19qset?p=preview https://plnkr.co/edit/qSLP5kVPLIWYdT19qset?p=preview

我找到了修复方法，但不确定它是否会导致任何副作用。毕竟我不是餐桌上的人。

我认为问题是因为你嵌套了<tr>，所以我改变了外部<tr> to <tbody>:

<tbody dependent-row *ngFor="let dependent of dependents"
    [dependent]='dependent' >

Plnkr: https://plnkr.co/edit/xxiGTcQvUaLruj9DIU5w?p=preview https://plnkr.co/edit/xxiGTcQvUaLruj9DIU5w?p=preview