Tworzenie wielu elementów w pętli Angular2

Question

Edytuj: O możliwej odpowiedzi: Natknąłem się na to pytanie/odpowiedź i zaimplementowałem je w ten sposób. Jednak w nowej wersji Angular2 składnia jest inna. Dokumentacja o numerze ngFor nie została zaktualizowana (tutaj właśnie wyglądałem). Więc napisałem zły kod. Dokumentacja dotycząca ngFor jest aktualizowana w Template Syntax - ngFor. Günter napisał poprawny przykład, jak go używać w nowszych wersjach Angular2 (wersja beta17 lub nowsza).

Chciałbym utworzyć wiele elementów w pętli. To jest to, co mam teraz:

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

Co chciałbym to pod kiedykolwiek tr inny tr z details. Żądany wynik powinien wyglądać następująco w przeglądarce:

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

Jak mogę osiągnąć pożądany rezultat?

Answer 1

<template ngFor [ngForOf]="items" let-item> jest kanoniczna dla *ngFor i pozwala na powtarzanie więcej niż jednego elementu.

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

W przeciwieństwie do polimeru (na przykład), używając <template> w <tbody> (lub innych elementów tabeli <tr>, ...) pracuje również dobrze w IE z Angular2, ponieważ Angular2 przetwarza szablon wewnętrznie i nigdy dodaje go do DOM. W Polymer to nie będzie działać, ponieważ IE usuwa "Unexpected" tagi z elementów tabeli (która łamie Poymers <template is="dom-repeat">) Zobacz również http://caniuse.com/#search=template

Answer 2

użyć poniższy kod komponent:

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'} 
    ]; 
    } 
} 

z następującymi app.component.html plik:

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

Wynik jest mniej więcej taki:

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

Aby uzyskać więcej informacji przeczytaj https://coryrylan.com/blog/angular-2-ng-for-syntax

Answer 3

Można to osiągnąć poprzez zapętlenie na <tbody> zamiast <tr>, jak tabele z roznych tbody jest ważna w html refer to.

Tak Twój kod będzie jak

<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

Ponieważ kątowa v4 <template> znacznik jest przestarzała. Zamiast tego użyj <ng-template>, jak opisano w samouczku: ng-template-element