Editar: sobre la posible respuesta: también me encontré con esa pregunta / respuesta y la implementé de esa manera. Sin embargo, con la nueva versión de Angular2 la sintaxis es diferente. La documentación sobre ngFor no se actualizó (esto es donde miré) Entonces escribí el código incorrecto. La documentación sobre ngFor se actualiza en la Sintaxis de plantilla - ngFor. Günter escribió un ejemplo correcto sobre cómo usarlo en las versiones más recientes de Angular2 (beta17 o superior).

Me gustaría crear múltiples elementos en un bucle. Esto es lo que tengo ahora:

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

Lo que me gustaría es siempre tr otro tr con details. El resultado deseado debería verse así en el navegador:

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

¿Cómo puedo lograr el resultado deseado?

5
Patrick2607 12 may. 2016 a las 11:56

4 respuestas

La mejor respuesta

<template ngFor [ngForOf]="items" let-item> es el canónico de *ngFor y permite repetir más de un elemento.

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!)'
  }
}

Ejemplo de Plunker

A diferencia de Polymer (por ejemplo), usar <template> dentro de <tbody> (u otros elementos de la tabla <tr>, ...) también funciona bien en IE con Angular2, porque Angular2 procesa la plantilla internamente y nunca la agrega al DOM. En Polymer, esto no funcionaría porque IE elimina las etiquetas "inesperadas" de los elementos de la tabla (lo que rompe Poymers <template is="dom-repeat">) Consulte también http://caniuse.com/#search=template

9
Günter Zöchbauer 12 may. 2016 a las 09:49

Dado que la etiqueta Angular v4 <template> está en desuso. Utilice <ng-template> en su lugar, como se describe en el tutorial: ng-template-element

1
Mate Šimović 29 may. 2017 a las 15:54

Puede lograr esto haciendo un bucle en <tbody> en lugar de <tr>, ya que las tablas con mutbody tbody son válidas en html consulte.

Entonces tu código será como

<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>
1
Community 23 may. 2017 a las 12:25

Use el siguiente código de componente:

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

Con el siguiente archivo 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>

El resultado es algo como esto:

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

Para obtener más información, lea https://coryrylan.com/blog/angular-2-ng -para-sintaxis

2
gevorg 4 jul. 2016 a las 12:15