Angular2 annidato ngFor

Question

ho bisogno di fare un equivalente di questo Angular2:

<?php 
foreach ($somethings as $something) { 
    foreach ($something->children as $child) { 
     echo '<tr>...</tr>'; 
    } 
} 

può questo essere realizzato con ngFor e non l'aggiunta di nuovi elementi tra <table> e <tr>?

Answer 1

Ho un campione che potrebbe essere simile a quello che si vuole:

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

Io lo uso per il rendering di un foglio di calcolo in cerca di griglia come si vede qui: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

Answer 2

Utilizza il modulo di 'modello' di la sintassi ngFor, vista qui. È un po 'più prolisso della semplice versione *ngFor, ma è così che si ottiene il loop senza output html (fino a quando non si intende farlo). Un'eccezione: riceverai comunque commenti HTML all'interno del tuo <table> ma spero che sia ok. Ecco un plunkr di lavoro: 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']}, 
    ] 
}