example - ngfor table angular 6

¿Cómo usar las plantillas Angular2 con*ngFor para crear una tabla a partir de matrices anidadas?

Question

Dada la siguiente matriz en los groups propiedades de componentes:

[
   {
     "name": "pencils",
     "items": ["red pencil","blue pencil","yellow pencil"]
   },
   {
     "name": "rubbers",
     "items": ["big rubber","small rubber"]
   },
]

¿Cómo crear una tabla html con todos los elementos, cada uno en una fila? El resultado HTML esperado:

<table>
    <tr><td><h1>pencils</h1></td></tr>
    <tr><td>red pencil</td></tr>
    <tr><td>blue pencil</td></tr>
    <tr><td>yellow pencil</td></tr>
    <tr><td><h1>rubbers</h1></td></tr>
    <tr><td>big rubber</td></tr>
    <tr><td>small rubber</td></tr>
</table>

El primer nivel es fácil:

<table>
    <tr *ngFor="#group of groups">
        <td><h1>{{group.name}}</h1></td>
    </tr>
</table>

Pero ahora tengo que iterar #item of group . El problema es que necesito los nuevos elementos <tr> después del elemento </tr> que define el group , no el interior .

¿Hay alguna solución para este tipo de problemas en las plantillas Angular2? Esperaría alguna etiqueta especial que pudiera usar en lugar de <tr> que no está escrita en el dom. Algo similar a facetas y fragmentos en JSF.

Answer 1

Este es un enfoque básico, seguro que se puede mejorar, de lo que entendí como su requisito.

Esto mostrará 2 columnas, una con el nombre del grupo y otra con la lista de elementos asociados al grupo.

El truco es simplemente incluir una lista dentro de la celda de elementos.

<table>
  <thead>
    <th>Groups Name</th>
    <th>Groups Items</th>
  </thead>
  <tbody>
    <tr *ngFor="let group of groups">
      <td>{{group.name}}</td>
      <td>
        <ul>
          <li *ngFor="let item of group.items">{{item}}</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

Esto funcionó para mí.

<table>
  <tr>
    <td *ngFor="#group of groups">
       <h1>{{group.name}}</h1>
   </td>
  </tr>
</table>

Answer 3

Prueba esto. El alcance de las variables locales definidas por la directiva "plantilla".

<table>
  <template ngFor let-group="$implicit" [ngForOf]="groups">
    <tr>
      <td>
        <h2>{{group.name}}</h2>
      </td>
    </tr>
    <tr *ngFor="let item of group.items">
                <td>{{item}}</td>
            </tr>
  </template>
</table>

Answer 4

Puede utilizar la sintaxis de plantilla de ngFor en groups y la sintaxis habitual dentro de ella para las filas reales como:

<table>
  <template let-group ngFor [ngForOf]="groups">
    <tr *ngFor="let row of group.items">{{row}}</tr>
  </template>
</table>

Revisa este plunk

Answer 5

Soy un fan de mantener la lógica fuera de la plantilla tanto como sea posible. Sugeriría crear una función auxiliar que devuelva los datos que le importan a la plantilla. Por ejemplo:

getItemsForDisplay():String[] {
 return [].concat.apply([],this.groups.map(group => group.items));
};

<tr *ngFor="let item of getItemsForDisplay()"><td>{{item}}</td></tr>

Esto le permitirá mantener su presentación libre de lógica especial. Esto también le permite utilizar su fuente de datos "directamente".

Answer 6

no es el resultado exacto lo que querías, pero tal vez algo como esto haga. Padre cmp:

<table>
  <item *ngFor="#i of items" [data]="i"></item>
</table>

Niño cmp

import {Component} from ''angular2/core'';

@Component({
  selector: `item`,
  inputs: [''data''],
  template: `
    <tr><td>{{data.name}}</td></tr>
    <tr *ngFor="#i of data.items">
      <td><h1>{{i}}</h1></td>
    </tr>
  `
})
export default class Item {


}

Answer 7

<table>
     <ng-container *ngFor="let group of groups">
         <tr><td><h2>{{group.name}}</h2></td></tr>
         <tr *ngFor="let item of group.items"><td>{{item}}</td></tr>
     </ng-container>
</table>