wake-up-neo.com

Wie verwende ich Angular2-Vorlagen mit * ngFor, um eine Tabelle aus verschachtelten Arrays zu erstellen?

Angenommen, das folgende Array in der Komponenteneigenschaft groups:

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

Wie erstelle ich eine HTML-Tabelle mit allen Elementen in jeweils einer Zeile? Das erwartete HTML-Ergebnis:

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

Die erste Stufe ist einfach:

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

Aber jetzt muss ich #item of group durchlaufen. Das Problem ist, dass ich die neuen <tr> elements after das </tr>-Element brauche, das group, nicht in definiert.

Gibt es eine Lösung für diese Art von Problemen in Angular2? Ich würde ein spezielles Tag erwarten, das ich anstelle von <tr> verwenden könnte, der nicht in den dom geschrieben wird. Etwas ähnlich zu Facetten und Fragmenten in JSF.

24
Witek

Sie können die Vorlagensyntax von ngFor für groups und die gewöhnliche Syntax für die eigentlichen Zeilen verwenden:

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

Überprüfen Sie diesen 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

Hier ist ein grundlegender Ansatz - es kann sicherlich verbessert werden - was ich als Ihre Anforderung verstanden habe.

Daraufhin werden 2 Spalten angezeigt, eine mit dem Gruppennamen und eine mit der Liste der Elemente, die der Gruppe zugeordnet sind.

Der Trick besteht einfach darin, eine Liste in die Elementezelle aufzunehmen.

<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

es ist nicht die exakte Ausgabe, die Sie wollten, aber vielleicht tut dies etwas. Übergeordnetes Cmp:

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

Kind 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

Versuche dies. Der Bereich der lokalen Variablen, der durch die Direktive "template" definiert wird.

<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

Das hat bei mir funktioniert.

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

Ich bin ein Fan davon, die Logik so weit wie möglich aus der Vorlage herauszuhalten. Ich würde vorschlagen, eine Hilfsfunktion zu erstellen, die die Daten, die Sie interessieren, an die Vorlage zurückgibt. Zum Beispiel:

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

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

Auf diese Weise können Sie Ihre Präsentation frei von besonderer Logik halten. Auf diese Weise können Sie Ihre Datenquelle auch "direkt" verwenden.

0
Malfus