Angular2 Table Row component on Chrome displays in single column

Question

Versions in use:

• Angular 2.0.1
• angular-cli 1.0.0-beta.17

I have a page that is broken into 3 components. The page outline, a table which has it's own layout including rows, one of these rows contains a row component. In IE the table displays fine, in Chrome all the data from the component row appears in the first column.

main.html

<form>
     <div>Title Stuff etc.</div>
     <table-component [qlineModel]="QuoteLineModel"></table-component>
     <div>Other stuff</div>
</form>

table.html

<table>
   <thead>
      <tr>
        <th>ColA</th>
        <th>ColB</th>
        <th>Option</th>
     </tr>
   </thead>
   <tbody>
      <row-component *ngFor="let qlines of qlineModel" 
                            [qline]="qlines">
      </row-component>
      <tr>
         <td>Tot A</td>
         <td>Tot B</td>
         <td>Tot Opt</td>
      </tr>
    </tbody>
  </table>

row.html

<tr>
   <td>{{qline.A}}</td>
   <td>{{qline.B}}</td>
   <td>{{qline.C}}</td>
</tr>

IE gives me the output I would expect

       Title Stuff etc
   ColA |  ColB  | Col C
   100     200     300
   200     300     400
   ___________________
   300    500     700
       Other Stuff

However, Chrome gives me an output I don't expect

       Title Stuff etc
   ColA        |  ColB  | Col C
   100 200 300
   200 300 400
   _____       ______________
   300           500     700
       Other Stuff

I can get around it by putting table data into one component but a) defeats the object for me and b) I want to potentially print the table out so ideally would like to keep it as is. I tried Angular2 table rows as component but kept getting NgFor only supports Iterables such as arrays

Any help gratefully received.

Answer 1

You can't have a <row-component> inside a <tbody> because that is not a valid child for <tbody>.

You can change the selector of RowComponent to [rowComponent] and then use it like

<tr rowComponent *ngFor="let qlines of qlineModel" 
                        [qline]="qlines">

Answer 2

Using a selector: 'tr[row-component]' in RowComponent would allow you to render

<table>
    <thead><!-- headers go here --></thead>
    <tbody>
        <tr row-component *ngFor="let qlines of qlineModel" [qline]="qlines"></tr>
    </tbody>
</table>

This is rendered correctly both on Chrome and IE.