Necesito hacer un equivalente de esto en Angular2 :
<?php foreach ($somethings as $something) { foreach ($something->children as $child) { echo '<tr>...</tr>'; } } ¿Se puede lograr esto con ngFor y no agregar nuevos elementos entre <table> y <tr> ?
Tengo una muestra que podría ser similar a lo que quieres:
<table id="spreadsheet"> <tr *ngFor="let row of visibleRows"> <td class="row-number-column">{{row.rowIndex}}</td> <td *ngFor="let col of row.columns"> <input data-id="{{col.rowIndex}}-{{col.columnIndex}}" [value]="col.cellValue" (input)="col.cellValue = $event.target.value" (click)="model.selectColumn(col)" (keyup)="navigate($event)" /> </td> </tr> </table>Lo uso para representar una cuadrícula que parece una hoja de cálculo, como se ve aquí: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet
Si necesita 2 o más bucles foreach para dibujar filas de una tabla, debe hacer algo similar a lo siguiente.
<template ngFor let-rule [ngForOf]="model.rules" let-ruleIndex="index"> <template ngFor let-clause [ngForOf]="rule.clauses" let-clauseIndex="index"> <tr> <td>{{clause.name}}</td> </tr> </template> </template>Use la forma 'plantilla' de la sintaxis ngFor, que se ve aquí. Es un poco más detallado que la versión *ngFor más simple, pero así es como se logra el bucle sin html de salida (hasta que se lo proponga). Una excepción: aún recibirá comentarios html dentro de su <table> pero espero que esté bien. Aquí hay un plunkr en funcionamiento: http://plnkr.co/edit/KLJFEQlwelPJfNZYVHrO?p=preview
@Component({ selector: 'my-app', providers: [], directives: [], template: ` <table> <template ngFor #something [ngForOf]="somethings" #i="index"> <template ngFor #child [ngForOf]="something.children" #j="index"> <tr>{{child}}</tr> </template> </template> </table> ` }) export class App { private somethings: string[][] = [ {children: ['foo1', 'bar1', 'baz1']}, {children: ['foo2', 'bar2', 'baz2']}, {children: ['foo3', 'bar3', 'baz3']}, ] }