提问者:小点点

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


我需要编写一个组件,其模板如下所示:

<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,发现

    < li>Angular2表格行作为组件,大约只有一个tr < li>Angular2:在没有包装标记的情况下呈现组件,问题是关于tr元素,而可接受的答案是关于td元素 < li >如何从HTML中删除/替换angular2组件的选择器标记,这将呈现一个附加的div元素

共1个答案

匿名用户

根据评论提出建议,未经测试。

组件选择器:[点行]

组件模板:

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

哪个有效(多个