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

Question

die folgende Array in Komponenteneigenschaft Gegeben groups:

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

Wie man eine HTML-Tabelle mit allen Elementen erstellen, die jeweils in einer Reihe? 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 Ebene ist einfach:

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

Aber jetzt muß ich #item of group laufen. Das Problem ist, dass ich die neuen <tr> Elemente nach das </tr> Element benötigen, das group, nicht innerhalb definiert.

Gibt es eine Lösung für diese Art von Problemen in Angular2 Templating? Ich würde ein spezielles Tag erwarten, das ich anstelle von <tr> verwenden könnte, das nicht in das Dom geschrieben wird. Etwas Ähnliches wie Facetten und Fragmente in JSF.

Answer 1

es ist nicht genau die Ausgabe, die Sie wollten, aber vielleicht wird so etwas tun. Mutter cmp:

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

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

Sie die Vorlage Syntax von ngFor auf groups und die übliche Syntax im Innern für die tatsächlichen Zeilen wie verwenden:

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

Check this plunk

Answer 3

Versuchen Sie dies. Der Umfang der lokalen Variablen, die durch die "template" -Direktive definiert sind.

<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

Ich bin ein Fan der Logik aus der Vorlage so viel wie möglich zu halten. 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 von spezieller Logik frei halten. Dadurch können Sie Ihre Datenquelle auch "direkt" verwenden.

Answer 5

Das funktionierte für mich.

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

Answer 6

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

Answer 7

Hier ist ein grundlegender Ansatz - es kann sicher verbessert werden - von dem, was ich Ihre Anforderung zu verstehen.

Dies zeigt 2 Spalten an, 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 Artikelzelle 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.item">{{item}}</li> 
     </ul> 
     </td> 
    </tr> 
    </tbody> 
</table>