在循环中呈现 2 个 tr 元素的 Angular2 组件

Posted 2023-03-05

【中文标题】在循环中呈现 2 个 tr 元素的 Angular2 组件

【英文标题】：Angular2 Component which renders 2 tr elements in a loop

【发布时间】：2017-07-30 12:29:32

【问题描述】：

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

<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 原因：无法在“节点”上执行“附加子级”： 此节点类型不支持此方法

然后我尝试了template

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

但这也给了我一个错误

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

我搜索了 *** 并找到了

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

【问题讨论】：

也许您可以使用<tbody> 作为包装元素？应该是有效的 HTML。 （去掉外层<tbody>）

【参考方案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>

哪个有效（<table> 中的多个 <tbody>）。

【讨论】：

tbody 方法并不完美，但它正在发挥作用。如我的问题所述，模板方法会产生错误。

@wertzui 抱歉，错过了您问题中的那一部分。