在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 下面都有另一个带有 details 的 tr。在浏览器中，期望的输出应该是这样的:

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

我该如何达到期望的结果？

- Starfish

---

我无法将信息和细节排列在下面，例如：信息 - 细节 - 信息 - 细节。我尝试的所有方法都导致了这样的结果：信息 - 信息 - 细节 - 细节。解决方案可能非常简单，但我卡住了。 - Starfish

这可能是一个解决方案：https://dev59.com/BVsW5IYBdhLWcg3w2aKK - martinczerwi

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不同（例如），在<tbody>（或其他表格元素<tr>, ...）中使用<template>在IE中也可以正常工作，因为Angular2在内部处理模板并从未将其添加到DOM中。在Polymer中，这不起作用，因为IE会从表格元素中删除“意外”的标记（这会破坏Poymers的<template is="dom-repeat">）。另请参见http://caniuse.com/#search=template

- Günter Zöchbauer

---

谢谢老兄，正如所料，你的回答非常有效。 - Starfish

在[ngFor][ngForOf]文档中有一个类似的例子，这里。 - WebWanderer

Answer 2

使用以下组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'demo-app',
  templateUrl: 'app/app.component.html',
  pipes: []
})
export class AppComponent {
  constructor() { 
    this.items = [
        {id: 1, name: 'Bob', details: 'Bob details'},
        {id: 2, name: 'Sarah', details: 'Sarah details'},
        {id: 3, name: 'Sam', details: 'Sam details'},
        {id: 4, name: 'Susan', details: 'Susan details'}
    ];
  }
}

以下是app.component.html文件的内容：

<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 colspan=2>{{ item['details'] }}</td>
            <!-- More detailed info about item -->
        </tr>
      </template>
    </tbody>
</table>

结果大致如下：

<table>
    <thead>
        <th>ID</th>
        <th>Name</th>
    </thead>
    <tbody>
        <tr class="info">
            <td>1</td>
            <td>Bob</td><td>
        </td></tr>
        <tr class="details">
            <td colspan="2">Bob details</td>                
        </tr>          
        <tr class="info">
            <td>2</td>
            <td>Sarah</td><td>
        </td></tr>
        <tr class="details">
            <td colspan="2">Sarah details</td>                
        </tr>          
        <tr class="info">
            <td>3</td>
            <td>Sam</td><td>
        </td></tr>
        <tr class="details">
            <td colspan="2">Sam details</td>                
        </tr>          
        <tr class="info">
            <td>4</td>
            <td>Susan</td><td>
        </td></tr>
        <tr class="details">
            <td colspan="2">Susan details</td>                
        </tr>          
    </tbody>
</table>

想了解更多信息请阅读https://coryrylan.com/blog/angular-2-ng-for-syntax

- gevorg

---

这在Angular2中不可用。 - Günter Zöchbauer

Answer 3

自从 Angular v4 版本开始，<template> 标签已经被弃用。请使用 <ng-template> 代替，教程中有详细说明：ng-template-element

- Mate Šimović

Answer 4

你可以通过对 <tbody> 循环而不是 <tr> 来实现此功能，因为具有多个 tbody 的表在 HTML 中是有效的。请参考。

所以你的代码会像这样：

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

- Praveen Kumar P