给定组件属性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
。问题是我需要在定义group
的</tr>
元素之后添加新的</tr>
元素,而不是在中定义。
对于Angular2模板中的此类问题,有什么解决方案吗?我希望有一些特殊的标签,我可以用它来代替没有写入到dom中的<tr>
。类似于JSF中的facet和片段。
发布于 2017-05-20 22:09:06
<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>
发布于 2016-05-11 19:58:43
您可以在groups
上使用ngFor
的模板语法,并将其内部的常用语法用于实际行,如:
<table>
<template let-group ngFor [ngForOf]="groups">
<tr *ngFor="let row of group.items">{{row}}</tr>
</template>
</table>
发布于 2017-12-20 00:27:03
这是一个基本的方法-它肯定可以改进-这是我理解的你的需求。
这将显示两列,一列包含组名称,另一列包含与组关联的项目列表。
诀窍就是在items单元格中包含一个列表。
<table>
<thead>
<th>Groups Name</th>
<th>Groups Items</th>
</thead>
<tbody>
<tr *ngFor="let group of groups">
<td>{{group.name}}</td>
<td>
<ul>
<li *ngFor="let item of group.items">{{item}}</li>
</ul>
</td>
</tr>
</tbody>
</table>
https://stackoverflow.com/questions/35699962
复制相似问题