如何将Angular2模板与* ngFor一起使用,以从嵌套数组中创建表? [英] How to use Angular2 templates with *ngFor to create a table out of nested arrays?
问题描述
在组件属性groups
中给出以下数组:
Given the following array in component property groups
:
[
{
"name": "pencils",
"items": ["red pencil","blue pencil","yellow pencil"]
},
{
"name": "rubbers",
"items": ["big rubber","small rubber"]
},
]
如何创建一个包含所有项目的html表?预期的HTML结果:
How to create a html table with all items, each in one row? The expected HTML result:
<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>
元素后之后定义group
的新<tr>
元素,不在内部.
But now I have to iterate #item of group
. The problem is that I need the new <tr>
elements after the </tr>
element which defines group
, not inside.
在Angular2模板中是否存在针对此类问题的解决方案?我希望可以使用一些特殊的标签代替<tr>
,它不会被写入dom.与JSF中的构面和片段类似.
Is there any solution for this kind of problems in Angular2 templating? I would expect some special tag which I could use instead of <tr>
which is not written into the dom. Something similar to facets and fragments in JSF.
推荐答案
<table>
<ng-container *ngFor="let group of groups">
<tr><td><h2>{{group.name}}</h2></td></tr>
<tr *ngFor="let item of group.items"><td>{{item}}</td></tr>
</ng-container>
</table>
这篇关于如何将Angular2模板与* ngFor一起使用,以从嵌套数组中创建表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!