Dada la siguiente matriz en groups de 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 group , no inside .
¿Hay alguna solución para este tipo de problemas en las plantillas de Angular2? Esperaría alguna etiqueta especial que podría usar en lugar de <tr> que no está escrita en el dom. Algo similar a facetas y fragmentos en JSF.
<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>Puede usar 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>Aquí hay un enfoque básico, seguro que se puede mejorar, de lo que entendí que era 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>