Angular2嵌套ngFor

Question

我需要在Angular2中做相同的事情:

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

这可以通过ngFor实现,而不是在<table>和之间添加新元素<tr>吗？

Answer 1

我有一个可能类似于你想要的样本:

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

我使用它来渲染一个看起来像网格的电子表格:http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

Answer 2

如果需要2个或更多foreach循环来绘制表格的行,则需要执行与以下操作类似的操作.

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

Answer 3

使用ngFor语法的"模板"形式,如此处所示.它比简单*ngFor版本更冗长,但这就是你如何在没有输出html的情况下实现循环(直到你打算).一个例外:你仍然会在你的内容中获得HTML评论,<table>但我希望没问题.这是一个有效的插件: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']},
  ]
}