Создание нескольких элементов в цикле Angular2

Question

Редактировать: О возможном ответе: я тоже наткнулся на этот вопрос/ответ и внедрил его таким образом. Однако с новой версией Angular2 синтаксис отличается. Документация о не была обновлена ​​(вот где я посмотрел). Поэтому я написал неверный код. Документация о ngFor обновлена ​​в Template Syntax - ngFor. Гюнтер написал правильный пример того, как использовать его в новых версиях 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> 

То, что я хотел бы под когда-либо trtr другой с 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 example

В отличие от полимеров (например), используя <template> внутри <tbody> (или другие элементы таблицы <tr>, ...) также отлично работает в IE с Angular2, потому что Angular2 обрабатывает шаблон внутри и никогда добавляет его в DOM. В Polymer это не будет работать, потому что IE удаляет «неожиданную» метку из элементов таблицы (нарушающий Poymers <template is="dom-repeat">) Смотрите также http://caniuse.com/#search=template

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

Answer 3

Вы можете достичь этого, зацикливание на <tbody> вместо <tr>, в виде таблиц с Mutiple 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> 

Answer 4

С Угловое v4 <template> тег является устаревшим. Используйте вместо этого <ng-template>, как описано в учебнике: ng-template-element