在循环Angular2中创建多个元素答案

【问题标题】：Create multiple elements in loop Angular2在循环Angular2中创建多个元素
【发布时间】：2016-09-07 23:53:24
【问题描述】：

编辑：关于可能的答案：我也遇到了那个问题/答案并以这种方式实施。但是，对于新版本的 Angular2，语法有所不同。关于ngFor 的文档没有更新（这是我查看的地方）。所以我写错了代码。 Template Syntax - 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>

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

【问题讨论】：

我无法在彼此下方获取信息和详细信息，例如：信息 - 详细信息 - 信息 - 详细信息。我尝试的所有结果都是：信息-信息-详细信息-详细信息。解决方案可能很简单，但我被卡住了。
这可能是一个解决方案：stackoverflow.com/questions/34533200/…

标签： javascript angular

【解决方案1】：

由于 Angular v4 <template> 标签已被弃用。请改用<ng-template>，如教程中所述： ng-template-element

【讨论】：

【解决方案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>

【讨论】：

Angular2 没有这个功能

【解决方案3】：

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

与 Polymer（例如）相反，在 <tbody> 中使用 <template>（或其他表格元素 <tr>, ...）在带有 Angular2 的 IE 中也可以正常工作，因为 Angular2 在内部处理模板并且永远不会将其添加到 DOM 中。在 Polymer 中这不起作用，因为 IE 从表格元素中删除了“意外”标签（这会破坏 Poymers <template is="dom-repeat">）另见http://caniuse.com/#search=template

【讨论】：

谢谢伙计，正如预期的那样，你的回答就像一个魅力
[ngFor][ngForOf] 文档here 中解释了类似的示例。

【解决方案4】：

您可以通过循环 <tbody> 而不是 <tr> 来实现这一点，因为具有多个 tbody 的表在 html refer to 中有效。

所以你的代码会是这样的

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

【讨论】：