我正在尝试使用angular2 2.0.0-beta.0
我有一个表格,行内容由angular2以这种方式生成:
<table>
<tr *ngFor="#line of data">
.... content ....
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
现在这个工作,我想将内容封装到一个组件"table-line".
<table>
<table-line *ngFor="#line of data" [data]="line">
</table-line>
</table>
Run Code Online (Sandbox Code Playgroud)
在组件中,模板具有<tr> <td>内容.
但是现在桌子不再有用了.这意味着,内容不再显示在列中.在浏览器中,检查器向我显示DOM元素如下所示:
<table>
<table-line ...>
<tbody>
<tr> ....
Run Code Online (Sandbox Code Playgroud)
我怎样才能做到这一点?
在角度2中,svg-rect是一个创建rect的组件,如下所示,
<svg height="550" width="450" x="0" y="0">
<g id="svgGroup">
<svg-rect>
<!--template bindings={}-->
<rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
<!--template bindings={}-->
</svg-rect>
<svg-rect>
<!--template bindings={}-->
<rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
<!--template bindings={}-->
</svg-rect>
</g>
</svg>
Run Code Online (Sandbox Code Playgroud)
但由于创建了特殊元素标签,因此不会呈现rect.如果删除了svg-rect标签,则会呈现rect
<svg height="550" width="450" x="0" y="0">
<g id="svgGroup">
<!--template bindings={}-->
<rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
<!--template bindings={}-->
<!--template bindings={}-->
<rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
<!--template bindings={}-->
</g> …Run Code Online (Sandbox Code Playgroud)