在循环Angular2中创建多个元素

Question

编辑:关于可能的答案:我也遇到了这个问题/答案并以这种方式实施.但是,对于新版本的Angular2,语法是不同的.关于ngFor的文档没有更新(这是我看的地方).所以我写了错误的代码.有关ngFor的文档在模板语法 - ngFor中更新.Günter写了一个关于如何在较新版本的Angular2(beta17或更高版本)中使用它的正确示例.

我想在循环中创建多个元素.这就是我现在拥有的:

<table>
    <thead>
        <th>ID</th>
        <th>Name</th>
    </thead>
    <tbody>
        <tr *ngFor="let item of items" class="info">
            <td>{{ item['id'] }}</td>
            <td>{{ item['name'] }}<td>
        </tr>
    </tbody>
</table>

我想是有史以来下tr另tr用details.在浏览器中,所需的输出应如下所示:

<table>
    <thead>
        <th>ID</th>
        <th>Name</th>
    </thead>
    <tbody>
        <tr class="info">
            <td>1</td>
            <td>Item 1<td>
        </tr>
        <tr class="details">
            <!-- More detailed info about item 1 -->
        </tr>
        <tr class="info">
            <td>2</td>
            <td>Item 2<td>
        </tr>
        <tr class="details">
            <!-- More detailed info about item 2 -->
        </tr>
    </tbody>
</table>

我怎样才能达到预期的效果？

Answer 1

<template ngFor [ngForOf]="items" let-item>是规范的,*ngFor并允许重复多个元素.

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
<table>
    <thead>
        <th>ID</th>
        <th>Name</th>
    </thead>
    <tbody>
      <template ngFor [ngForOf]="items" let-item>
        <tr class="info">
          <td>{{ item['id'] }}</td>
          <td>{{ item['name'] }}<td>
        </tr>
        <tr class="details">
          <td>{{ item['description'] }}<td>
        </tr>
      </template>    
    </tbody>
</table>

    </div>
  `,
  directives: []
})
export class App {
  items = [
    {name: 'name1', id: 1, description: 'description1'}
    {name: 'name2', id: 2, description: 'description2'}
    {name: 'name3', id: 3, description: 'description3'}
  ];
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }
}

Plunker的例子

与Polymer(例如)相反,使用<template>内部<tbody>(或其他表元素<tr>, ...)也可以在IE中使用Angular2,因为Angular2在内部处理模板并且从不将它添加到DOM.在Polymer中这不起作用,因为IE从表元素中删除了"意外"标签(打破了Poymers <template is="dom-repeat">)参见http://caniuse.com/#search=template