Angular2 lồng ngFor

Question

tôi cần phải làm một tương đương về điều này trong Angular2:

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

này có thể đạt được với ngFor và không thêm các yếu tố mới giữa <table> và <tr>?

Answer 1

Tôi có một mẫu mà có thể là tương tự như những gì bạn muốn:

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

tôi sử dụng để render ra một bảng tính tìm kiếm lưới như đã thấy ở đây: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

Answer 2

Sử dụng 'mẫu' hình thức cú pháp ngFor, xem ở đây. Đó là một chút tiết hơn so với phiên bản *ngFor đơn giản hơn, nhưng đây là cách bạn đạt được vòng lặp mà không có đầu ra html (cho đến khi bạn có ý định). Một ngoại lệ: bạn vẫn sẽ nhận được nhận xét html trong số <table> nhưng tôi hy vọng điều đó là ổn. Dưới đây là một plunkr làm việc: 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']}, 
    ] 
}