Angular2 Компонент, който прави 2 tr елементи в цикъл - javascript, html, angularjs, ъглова

Трябва да напиша компонент, който има шаблон, който изглежда така:

<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, причинен от: Неуспешно изпълнение на "appendChild" в "Node": Този тип възел не поддържа този метод

Тогава опитах template

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

Но това също ми дава грешка

Грешка: Грешки в анализа на шаблона: Компоненти на вграден шаблон: SpotRowComponent ("[ERROR ->] ")

Търсих StackOverflow и намерих

• Angular2 таблични редове като компонент което е само около един tr
• Angular2: изобразява компонент без неговия етикет за опаковане където въпросът пита за tr елементи и приетият отговор е за td елементи
• Как да премахнете / замените селекторния маркер на компонента angular2 от HTML което ще направи допълнителен div елемент

Отговори:

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

---