使用中的版本:
- 角2.0.1
- 角度-cli 1.0.0-beta.17
我有一个页面分为 3 个组件。页面大纲是一个具有自己的布局(包括行)的表格,其中一行包含行组件。
在 IE 中,表格显示良好,在 Chrome 中,组件行中的所有数据都显示在第一列中。
主要.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>
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 表行作为组件但不断发现 NgFor 仅支持可迭代对象,例如数组
非常感谢任何帮助。
你不能有一个<row-component>
里面一个<tbody>
因为这不是一个有效的孩子<tbody>
.
您可以更改选择器RowComponent
to [rowComponent]
然后像这样使用它
<tr rowComponent *ngFor="let qlines of qlineModel"
[qline]="qlines">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)