Chrome上的Angular2 Table Row组件显示在单列中 [英] Angular2 Table Row component on Chrome displays in single column

问题描述

使用的版本：

• Angular 2.0.1


• angular-cli 1.0.0 -beta.17

我有一个分成3个组件的页面。页面大纲是一个包含行的自己的布局的表格，其中一行包含行组件。
在IE中，表格显示正常，在Chrome中，组件行中的所有数据都显示在第一列中。

main.html

 < form> 
< div>标题资料等。< / div> 
 < div>其他内容< / div> 
< / form> 
  

table.html

 <表> 
< thead> 
< tr> 
 ColA< / th> 
 ColB< / th> 
< th> Option< / th> 
< / tr> 
< / thead> 
< tbody> 
  [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给我输出我期望的结果

 标题资料等
 ColA | ColB | Col C 
 100 200 300 
 200 300 400 
 ___________________ 
 300 500 700 
其他东西
  

然而，Chrome给了我一个我不期望的结果 p

  Title东西等
 ColA | ColB | Col C 
 100 200 300 
 200 300 400 
 _____ ______________ 
 300 500 700 
其他材料
  

我可以通过将表数据放到一个组件中来解决它，但a）为我打败了对象，并且b）我想潜在地将表打印出来，保持原样。
我尝试了 Angular2表格行作为组件，但不断获得NgFor只支持Iterables如数组

感谢您的任何帮助。

解决方案

您可以在< tbody> 中没有< row-component> ，因为这不是有效的孩子< tbody> 。

您可以更改 RowComponent 到 [rowComponent] ，然后像使用它一样

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

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.

解决方案

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

这篇关于Chrome上的Angular2 Table Row组件显示在单列中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！