Angular2 zagnieżdżone ngFor

Question

muszę zrobić odpowiednik tego w Angular2:

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

można to osiągnąć z ngFor i nie dodając nowe elementy między <table> i <tr>?

Answer 1

Mam próbki, które mogą być podobne do tego, co chcesz:

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

Używam tego uczynić z arkusza kalkulacyjnego patrząc siatkę jak widać tutaj: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

Answer 2

Użyj „szablon” forma składnia ngFor, patrz tutaj. Jest nieco bardziej gadatliwa niż prostsza wersja *ngFor, ale w ten sposób uzyskujesz pętlę bez wyjściowego html (aż do tego, co masz zamiar). Jeden wyjątek: nadal będziesz otrzymywać komentarze html w swoim numerze <table>, ale mam nadzieję, że wszystko jest w porządku. Oto plunkr pracy: 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']}, 
    ] 
}