Come utilizzare i modelli Angular2 con * ngFor per creare una tabella con gli array annidati?

Question

dato la seguente matrice in proprietà del componente groups:

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

Come creare una tabella HTML con tutti gli elementi, ciascuno in una riga? Il risultato atteso HTML:

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

Il primo livello è facile:

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

Ma ora devo iterare #item of group. Il problema è che ho bisogno del nuovo <tr> elementi dopo l'elemento </tr> che definisce group, non all'interno di.

Esiste una soluzione per questo tipo di problemi in Angular2 templating? Mi aspetterei qualche tag speciale che potrei usare al posto di <tr> che non è scritto nella dom. Qualcosa di simile alle sfaccettature e ai frammenti in JSF.

Answer 1

non è l'output esatto che si voleva, ma forse qualcosa del genere farà. Parent cmp:

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

Bambino 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

È possibile utilizzare la sintassi del modello di ngFor sul groups e la solita sintassi al suo interno per le righe del momento come:

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

Check this plunk

Answer 3

Prova questo. L'ambito delle variabili locali definite dalla direttiva "modello".

<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

Sono un fan di mantenere la logica fuori dal modello il più possibile. Suggerirei di creare una funzione di supporto che restituisca i dati a cui tieni al modello. Per esempio:

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

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

Questo vi permetterà di mantenere la presentazione libera di logica speciale. Ciò consente anche di utilizzare la fonte dati "direttamente".

Answer 5

Questo ha funzionato per me.

<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

Ecco un approccio di base - sicuramente può essere migliorato - di quello che ho capito di essere la vostra esigenza.

Questo visualizzerà 2 colonne, una con il nome di gruppi e una con l'elenco di elementi associati al gruppo.

Il trucco è semplicemente includere un elenco all'interno della cella degli elementi.

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