我需要编写一个组件,其模板如下所示:
<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由:未能在“节点”上执行“appendKids”引起:此节点类型不支持此方法
然后我尝试了模板
<table>
<tbody>
<template spot-row *ngFor="let spot of spots" [spot]="spot"></template>
</tbody>
<table>
但这也给了我一个错误
错误:模板解析错误:嵌入式模板上的组件:SpotRowComponent (“ [错误 -
我搜索了StackOverflow,发现
根据评论提出建议,未经测试。
组件选择器:[点行]
组件模板:
<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>
哪个有效(多个