Учитывая следующий массив в свойстве компонента groups
:
[
{
"name": "pencils",
"items": ["red pencil","blue pencil","yellow pencil"]
},
{
"name": "rubbers",
"items": ["big rubber","small rubber"]
},
]
Как создать таблицу html со всеми элементами, каждая в одной строке? Ожидаемый результат HTML:
<table>
<tr><td><h1>pencils</h1></td></tr>
<tr><td>red pencil</td></tr>
<tr><td>blue pencil</td></tr>
<tr><td>yellow pencil</td></tr>
<tr><td><h1>rubbers</h1></td></tr>
<tr><td>big rubber</td></tr>
<tr><td>small rubber</td></tr>
</table>
Первый уровень прост:
<table>
<tr *ngFor="#group of groups">
<td><h1>{{group.name}}</h1></td>
</tr>
</table>
Но теперь я должен повторить #item of group
. Проблема в том, что мне нужны новые <tr>
элементы после элемента </tr>
, который определяет group
, не внутри.
Есть ли какое-либо решение для такого рода проблем в шаблоне Angular2? Я ожидал бы некоторого специального тега, который я мог бы использовать вместо <tr>
, который не был записан в dom. Что-то похожее на фасеты и фрагменты в JSF.