javascript - Angular2 Component 循环渲染 2 个 tr 元素

Question

我需要编写一个具有如下模板的组件:

<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>

但这产生了一个错误

Error: Error in ./SpotRowComponent class SpotRowComponent - inline template:0:0 caused by: Failed to execute 'appendChild' on 'Node': This node type does not support this method

然后我尝试了template

<table>
<tbody>
<template spot-row *ngFor="let spot of spots" [spot]="spot"></template>
</tbody>
<table>

但这也给我一个错误

Error: Template parse errors: Components on an embedded template: SpotRowComponent (" [ERROR ->] ")

我搜索了 StackOverflow 并找到了

• Angular2 table rows as component这只有大约一个 tr
• Angular2 : render a component without its wrapping tag问题询问有关 tr 元素的地方，接受的答案是关于 td 元素
• How to remove/replace the angular2 component's selector tag from HTML这将呈现一个额外的 div 元素

Answer 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>)。