Angular2 组件以循环方式呈现两个 tr 元素

Question

Angular2 组件以循环方式呈现两个 tr 元素

4

我需要编写一个组件，其模板应如下所示：

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

但这也给我带来了一个错误

错误：模板解析错误：嵌入式模板上的组件：SpotRowComponent(" [ERROR ->] ")

我在StackOverflow上搜索并发现了以下内容：

Angular2将表格行作为组件，仅涉及一个tr元素
Angular2：渲染不带包装标记的组件，问题涉及tr元素，而被接受的答案则涉及td元素
如何从HTML中删除/替换angular2组件的选择器标记，这将渲染一个额外的div元素

- wertzui

也许您可以使用<tbody>作为包装元素？应该是有效的HTML。（删除外部的<tbody>） - Arg0n

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arg0n · Accepted Answer

根据评论提供的建议，此内容未经测试。

组件选择器：[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>

哪种情况是有效的（在<table>中有多个<tbody>）.