Angular2 verschachtelt ngFor

Question

Ich brauche ein Äquivalent dies in Angular2 zu tun:

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

Kann dies mit ngFor erreicht werden und nicht das Hinzufügen neuer Elemente zwischen <table> und <tr>?

Answer 1

Ich habe eine Probe, die ähnlich sein könnte, was Sie wollen:

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

Ich benutze dies eine Tabelle zu rendern suchen Gitter hier gesehen: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

Answer 2

Verwenden Sie die ‚Vorlage‘ Form Die ngFor-Syntax, hier zu sehen. Es ist ein wenig ausführlicher als die einfachere Version *ngFor, aber so erreichen Sie Schleifen ohne Ausgabe HTML (bis Sie beabsichtigen). Eine Ausnahme: Sie werden immer noch HTML-Kommentare innerhalb Ihrer <table> bekommen, aber ich hoffe, dass es in Ordnung ist. Hier ist eine Arbeits plunkr: 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']}, 
    ] 
}