/ / Componente Angular2 que renderiza 2 tr elementos em um loop - javascript, html, angularjs, angular

Angular2 Component que renderiza 2 tr elementos em um loop - javascript, html, angularjs, angular

Preciso escrever um componente que tenha um modelo parecido com este:

<tr>...</tr>
<tr>...</tr>

Deve ser usado com * ngFor para criar uma tabela. O seletor para o componente é spot-row. O componente tem uma variável de entrada chamada spot.

A saída desejada deve ser assim:

<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<table>

Eu tentei o seguinte:

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

Mas isso produziu

<table>
<tbody>
<spot-row>
<tr>...</tr>
<tr>...</tr>
</spot-row>
</tbody>
<table>

Então tentei mudar o seletor de componentes para [spot-row] e usando ng-container

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

Mas isso produziu um erro

Erro: erro na classe ./SpotRowComponent SpotRowComponent - embutido template: 0: 0 causado por: Falha ao executar "appendChild" em "Node": Este tipo de nó não suporta este método

Então eu tentei template

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

Mas isso também me dá um erro

Erro: erros de análise de modelo: componentes em um modelo incorporado: SpotRowComponent ("[ERROR ->] ")

Eu pesquisei StackOverflow e encontrei

Respostas:

0 para resposta № 1

Sugestão conforme comentário, não testado.

Seletor de componente: [spot-row]

Modelo de componente:

<tr>...</tr>
<tr>...</tr>

HTML:

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

Isso deve produzir:

<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
...
</table>

O que é válido (múltiplo <tbody> dentro <table>).