我需要编写一个具有如下模板的组件：
<tr>...</tr>
<tr>...</tr>
这必须与 *ngFor 一起使用来创建表。
组件的选择器是spot-row。
该组件有一个名为的输入变量spot.
所需的输出必须如下所示：
<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<table>
我尝试了以下方法：
<table>
<tbody>
<spot-row *ngFor="let spot of spots" [spot]="spot"></spot-row>
</tbody>
<table>
但这产生了
<table>
<tbody>
<spot-row>
<tr>...</tr>
<tr>...</tr>
</spot-row>
</tbody>
<table>
然后我尝试将组件选择器切换到[spot-row]并使用ng-container
<table>
<tbody>
<ng-container spot-row *ngFor="let spot of spots" [spot]="spot"></ng-container>
</tbody>
<table>
但这产生了一个错误
错误：./SpotRowComponent 类 SpotRowComponent 中出现错误 - 内联
template:0:0 导致：无法在“Node”上执行“appendChild”：
该节点类型不支持该方法
然后我尝试了template
<table>
<tbody>
<template spot-row *ngFor="let spot of spots" [spot]="spot"></template>
</tbody>
<table>
但这也给了我一个错误
错误：模板解析错误：嵌入模板上的组件：
SpotRowComponent (" [错误 ->]
”）
我搜索了 StackOverflow 并发现
-
Angular2 表行作为组件这大约只有一个 tr
-
Angular2：渲染没有包装标签的组件其中问题询问 tr 元素，接受的答案是
关于td元素
-
如何从 HTML 中删除/替换 Angular 组件选择器标签这将渲染一个额外的 div 元素
根据评论提出的建议，未经测试。
组件选择器：[spot-row]
组件模板：
<tr>...</tr>
<tr>...</tr>
HTML:
<table>
<tbody *ngFor="let spot of spots" spot-row [spot]="spot"></tbody>
<table>
这应该产生：
<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
...
</table>
哪个有效（多个<tbody> in <table>).
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
