TR子组件内的Angular2 FormGroup

时间:2016-07-19 15:56:36

标签: angular angular2-forms

我在表中有一个HttpError: <HttpError 403 when requesting https://www.googleapis.com/analytics/v3/management/accountSummaries?alt=json returned "Insufficient Permission">子行组件,我需要用FormGroup包装。这样的事情。

*ngFor

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

我尝试过使用元素选择器和属性选择器,但无论如何似乎都有路障。如果我使用属性选择器<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周围包装任何内容以将input分配给它弄乱了列。如果我使用元素选择器formGroup并将<dependent-row></dependent-row>放在子组件中,就像上面的示例一样,那么只需列出所有内联的tr,就会使表更糟糕。

我希望我已经很好地描述了我的问题。谢谢你的期待!

更新

以下是使用属性选择器的示例。 tr组件中的tr标记会丢弃表格列,但我需要添加dependent-row的内容,因此我不确定如何正确处理此问题。

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

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

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

1 个答案:

答案 0 :(得分:6)

我找到了修复,但不确定是否会引起任何副作用。毕竟我不是桌上人。

我认为问题是因为您嵌套了<tr>,因此我将外部<tr>更改为<tbody>

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

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