Angular2 FormGroup in TR untergeordnete Komponente

Question

Ich habe eine *ngFor untergeordnete Zeilenkomponente in einer Tabelle, die ich mit einer FormGroup umbrechen muss. Etwas wie das.

Aber ich kann nicht herausfinden, wie man die Komponente aus der übergeordneten Vorlage lädt, ohne dass es die Ausrichtung der Header-Spalten durcheinander bringt.

Ich habe versucht mit einem Element-Selektor und einem Attribut-Selektor, aber es scheint einen Roadblock in beide Richtungen zu geben. Wenn ich eine Attributauswahl verwenden, <tr dependent-row>, und entfernen Sie die 10 aus dem Kind ich kann dann nichts um meine input s, um eine formGroup zuweisen, oder es vermasselt die Spalten. Wenn ich einen Elementselektor <dependent-row></dependent-row> benutze und die tr in die Kindkomponente wie das obige Beispiel setze, macht das die Tabelle noch schlechter, indem sie einfach alle tr s inline auflistet.

Ich hoffe, ich habe mein Problem gut genug beschrieben. Danke fürs schauen!

UPDATE

Hier ist ein Beispiel ein Attribut Selektor. Die tr Tags in der dependent-row Komponente werfen die Tabellenspalten weg, aber ich brauche etwas, um ein formGroup hinzuzufügen, damit ich nicht sicher bin, wie man richtig damit umgeht.

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

Hier ist das alternative Verfahren ein Element Selektor.

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

Answer 1

fand ich eine Lösung, aber nicht sicher, ob es eine Nebenwirkung verursacht. Ich bin schließlich nicht der Tischmann.

Ich denke, das Problem ist, weil Sie <tr> verschachtelt haben, also habe ich die äußere <tr> zu <tbody>:

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

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