给定组件属性组中的以下数组:
[ { "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的组.问题是我需要新的< tr> < / tr>之后的元素元素定义组,而不是内部.
在Angular2模板中有没有解决这种问题的方法?我会期待一些可以使用的特殊标签,而不是< tr>这不是写入dom.类似于JSF中的小平面和碎片的东西.
您可以使用组中的ngFor的模板语法以及其中实际行中的通常语法,如:
<table> <template let-group ngFor [ngForOf]="groups"> <tr *ngFor="let row of group.items">{{row}}</tr> </template> </table>