angular - 如何使用带有 *ngFor 的 Angular2 模板从嵌套数组中创建一个表？

Question

给定组件属性中的以下数组 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 中的方面和片段。

Answer 1

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