我需要编写一个具有如下模板的组件:
<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 - 内联 模板:0:0导致:无法执行&#39; appendChild&#39; on&#39; Node&#39;: 此节点类型不支持此方法
然后我尝试了template
<table>
<tbody>
<template spot-row *ngFor="let spot of spots" [spot]="spot"></template>
</tbody>
<table>
但这也给了我一个错误
错误:模板解析错误:嵌入式模板上的组件: SpotRowComponent(&#34; [ERROR - &gt;] &#34)
我搜索了StackOverflow并找到了
答案 0 :(得分:1)
根据评论建议,未经测试。
组件选择器:[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>
中多个<table>
)。