如何使用Angular2模板与* ngFor从嵌套数组创建表？

发布时间：2020-12-17 07:37:38 所属栏目：安全来源：网络整理

导读：给定组件属性组中的以下数组： [ { "name": "pencils","items": ["red pencil","blue pencil","yellow pencil"] },{ "name": "rubbers","items": ["big rubber","small rubber"] },] 如何创建一个html表与所有项目,每一行？预期的HTML结果： table trtdh1pen

给定组件属性组中的以下数组：

[
   {
     "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>

Check this plunk

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!