web-dev-qa-db-fra.com

Comment utiliser les modèles Angular2 avec * ngFor pour créer un tableau à partir de tableaux imbriqués?

Étant donné le tableau suivant dans la propriété de composant groups:

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

Comment créer une table html avec tous les éléments, chacun sur une ligne? Le résultat HTML attendu:

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

Le premier niveau est facile:

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

Mais maintenant, je dois parcourir #item of group. Le problème est que j'ai besoin des nouveaux éléments <tr>après de l'élément </tr> qui définit group, non dans.

Existe-t-il une solution à ce type de problème dans Angular2? Je m'attendrais à une balise spéciale que je pourrais utiliser à la place de <tr> qui n'est pas écrite dans le dom. Quelque chose de similaire aux facettes et fragments de JSF.

angularangular2-templateangular-template
24
Witek

Vous pouvez utiliser la syntaxe de modèle de ngFor sur groups et la syntaxe habituelle à l'intérieur pour les lignes réelles comme:

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

Vérifiez ce plunk

23
Abdulrahman
<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>
21
Victor

Voici une approche de base - cela peut certainement être amélioré - de ce que j’ai compris être votre exigence.

Cela affichera 2 colonnes, une avec le nom du groupe et une avec la liste des éléments associés au groupe.

L'astuce consiste simplement à inclure une liste dans la cellule des éléments.

<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>
6
avi.elkharrat

ce n'est pas le résultat exact que vous souhaitiez, mais peut-être que quelque chose comme cela fera l'affaire. Parent cmp:

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

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


}
2
kit

Essaye ça. La portée des variables locales définies par la directive "template".

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

Cela a fonctionné pour moi.

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