如何使用带有 *ngFor 的 Angular2 模板从嵌套数组中创建表? [英] How to use Angular2 templates with *ngFor to create a table out of nested arrays?

问题描述

给定组件属性 groups 中的以下数组:

<预><代码>[{"name": "铅笔","items": ["红铅笔","蓝铅笔","黄铅笔"]},{"name": "橡胶","items": ["大橡皮","小橡皮"]},]

如何创建一个包含所有项目的 html 表格，每个项目都在一行中?预期的 HTML 结果:

<tr><td><h1>铅笔</h1></td></tr><tr><td>红铅笔</td></tr><tr><td>蓝色铅笔</td></tr><tr><td>黄色铅笔</td></tr><tr><td><h1>橡胶</h1></td></tr><tr><td>大橡胶</td></tr><tr><td>小橡胶</td></tr>

第一级很简单:

<tr *ngFor="#group of groups"><td><h1>{{group.name}}</h1></td></tr>

但现在我必须迭代#item of group.问题是我需要新的 <tr> 元素 after </tr> 元素定义 group，不在里面.

Angular2 模板中的这类问题有什么解决方案吗?我希望我可以使用一些特殊的标签来代替 <tr> ，它没有写入 dom.类似于 JSF 中的方面和片段.

解决方案

<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-容器>

Given the following array in component property groups:

[
   {
     "name": "pencils",
     "items": ["red pencil","blue pencil","yellow pencil"]
   },
   {
     "name": "rubbers",
     "items": ["big rubber","small rubber"]
   },
]

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>

The first level is easy:

<table>
    <tr *ngFor="#group of groups">
        <td><h1>{{group.name}}</h1></td>
    </tr>
</table>

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.

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>

这篇关于如何使用带有 *ngFor 的 Angular2 模板从嵌套数组中创建表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！