Chrome上的Angular2表格行组件以单列显示

Question

使用的版本:

• 角度 2.0.1
• 角气候 1.0.0-beta.17

我有一个分为3个部分的页面。页面大纲是一个具有自己的布局（包括行）的表，其中一行包含行组件。在IE中，表格显示良好，在Chrome中，来自组件行的所有数据都显示在第一列中。

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

<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>

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

IE为我提供了我期望的输出

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

然而，Chrome给了我一个我没有预料到的输出

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

我可以通过将表数据放入一个组件中来解决这个问题，但a）对我来说会破坏对象，b）我想潜在地打印出表，因此理想情况下，我希望保持它的原样。我尝试将Angular2表行作为组件，但一直得到NgFor，它只支持数组等可重用项

感激地收到任何帮助。

Answer 1

在RowComponent中使用选择器：'tr[row-component]'将允许您渲染

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

这是正确地呈现在Chrome和IE。

Answer 2

您不能拥有

您可以将RowComponent的选择器更改为[rowComponent]，然后像这样使用它

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