Angular2 Component,它在循环中呈现2 tr元素

时间:2017-03-09 13:31:12

标签: javascript html angularjs angular

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

<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导致:无法执行&#39; appendChild&#39; on&#39; Node&#39;:   此节点类型不支持此方法

然后我尝试了template

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

但这也给了我一个错误

  

错误:模板解析错误:嵌入式模板上的组件:   SpotRowComponent(&#34; [ERROR - &gt;]   &#34)

我搜索了StackOverflow并找到了

1 个答案:

答案 0 :(得分: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>)。