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
- Angular2 linhas da tabela como componente que é apenas cerca de um tr
- Angular2: renderizar um componente sem sua tag de envolvimento onde a pergunta pergunta sobre tr elementos e a resposta aceita é sobre elementos td
- Como remover / substituir a tag do seletor do componente angular2 do HTML que renderizará um elemento div adicional
Respostas:
0 para resposta № 1Sugestã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>
).