首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在* of中使用Angular2模板来创建嵌套数组之外的表?

如何在* of中使用Angular2模板来创建嵌套数组之外的表?
EN

Stack Overflow用户
提问于 2016-02-29 20:46:29
回答 8查看 123.8K关注 0票数 33

给定组件属性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和片段。

EN

回答 8

Stack Overflow用户

发布于 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>
票数 47
EN

Stack Overflow用户

发布于 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>

Check this plunk

票数 26
EN

Stack Overflow用户

发布于 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>
票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35699962

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档