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

Question

正在使用的版本:

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

我有一个分为 3 个部分的页面。页面大纲，一个表格，它有自己的布局，包括行，这些行之一包含一个行组件。 在 IE 中，表格显示正常，在 Chrome 中，组件行中的所有数据都显示在第一列中。

main.html

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

表格.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>

行.html

<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 table rows as component但不断得到 NgFor 只支持数组等 Iterables

感谢收到的任何帮助。

Answer 1

你不能有 <row-component>在 <tbody> 里面因为那不是 <tbody> 的有效 child .

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

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