Chrome上的Angular2 Table Row组件以单列显示答案

【问题标题】：Angular2 Table Row component on Chrome displays in single columnChrome上的Angular2 Table Row组件以单列显示
【发布时间】：2016-10-10 18:04:00
【问题描述】：

正在使用的版本：

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>

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 给出了我期望的输出

       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

感谢您的帮助。

【问题讨论】：

标签： google-chrome internet-explorer angular angular2-components

【解决方案1】：

您不能在 <tbody> 中包含 <row-component>，因为这不是 <tbody> 的有效子代。

你可以把RowComponent的选择器改成[rowComponent]，然后像这样使用

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

【讨论】：

完美，我错过了选择器周围的 []，非常感谢。为什么它在 IE 中很好？
浏览器只是在这种情况下表现不同。我很少使用 IE，但我知道 IE 会删除表格中的 <template> 标签，而标准和其他浏览器允许这样做。

【解决方案2】：

在 RowComponent 中使用 selector: '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 上都能正确呈现。

【讨论】：