如何使用带有* 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中的facet和片段类似的东西。

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>

Answer 2

您可以在ngFor上使用groups的模板语法，并在其中使用通常的语法，例如：

<table>
  <template let-group ngFor [ngForOf]="groups">
    <tr *ngFor="let row of group.items">{{row}}</tr>
  </template>
</table>

Check this plunk

Answer 3

这是一个基本的方法 - 它肯定可以改进 - 我所理解的是你的要求。

这将显示2列，一列包含组名称，另一列包含与该组关联的项目列表。

诀窍就是在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>

Answer 4

这不是你想要的确切输出，但也许这样的事情会做。家长cmp：

<table>
  <item *ngFor="#i of items" [data]="i"></item>
</table>

儿童cmp

import {Component} from 'angular2/core';

@Component({
  selector: `item`,
  inputs: ['data'],
  template: `
    <tr><td>{{data.name}}</td></tr>
    <tr *ngFor="#i of data.items">
      <td><h1>{{i}}</h1></td>
    </tr>
  `
})
export default class Item {


}

Answer 5

试试这个。由“template”指令定义的局部变量的范围。

<table>
  <template ngFor let-group="$implicit" [ngForOf]="groups">
    <tr>
      <td>
        <h2>{{group.name}}</h2>
      </td>
    </tr>
    <tr *ngFor="let item of group.items">
                <td>{{item}}</td>
            </tr>
  </template>
</table>

Answer 6

我是尽可能地将逻辑排除在模板之外的粉丝。我建议创建一个帮助函数，将您关心的数据返回给模板。例如：

getItemsForDisplay():String[] {
 return [].concat.apply([],this.groups.map(group => group.items));
};

<tr *ngFor="let item of getItemsForDisplay()"><td>{{item}}</td></tr>

这将使您的演示文稿不受特殊逻辑的影响。这也允许您“直接”使用数据源。

Answer 7

这对我有用。

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