Angular2嵌套的ngFor

Question

我需要在Angular2中实现相同功能：

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

使用ngFor可以实现这一点，而不需要在<table>和<tr>之间添加新元素。

- Okneloper

---

在你的HTML中使用ng-repeat。 - danday74

PS：你可以嵌套使用ng-repeat。 - danday74

ng-repeat？在Angular2中没有ng-repeat吗？你建议切换到Angular 1.x吗？ - Okneloper

它的编辑不是我完成的，而是由另一个人完成的。最初的问题版本中有两次提到Angular2，但现在已经修改了。 - Okneloper

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

- TGH

---

谢谢您，@TGH先生。 - Christian Matthew

该链接已失效。 - Ollie

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>    

- Chris Snowden

Answer 3

使用“模板”形式的ngFor语法，如下所示。它比简单的*ngFor版本更冗长，但这是实现循环而不输出html（直到你想要输出）的方法。一个例外：您仍将在<table>中得到html注释，但我希望这没问题。这是一个可工作的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']},
  ]
}

- Tim Kindberg

---

我不确定Angular如何处理这个问题，但IE会删除<table>中的<template>标签。 - Günter Zöchbauer

编译前只是一个<template>。编译后，实际写入DOM的只有<table>和一些子HTML注释，它们充当模板的锚点。但模板本身不会在运行时插入。(至少据我所知)。因此，只要允许在<table>内部使用注释，它就可以正常工作。 - Tim Kindberg

新的语法是 <template ngFor let-item [ngForOf]="items" let-index="index"> - Chris Snowden

Answer 4

模板对我不起作用，但使用ngForOf的ng-template就可以解决问题：

<ng-template ngFor let-parent [ngForOf]="parent" >
    <tr *ngFor="let child of parent.children">
        <td>
            {{ child.field1 }}
        </td>
        <td> 
            {{ child.field2 }}
        </td>
        <td> ... and so one ... </td>
    </tr>
</ng-template>

- jspassov

Answer 5

我只是尝试显示数据库中任何表的数据。我是这样做的：

我的TypeScript Ajax调用API在table.component.ts中：

http.get<ITable>(url, params).subscribe(result => {
  this.tables = result;
}, error => console.error(error));

我的ITable

 interface ITable {
  tableName: string;
  tableColumns: Array<string>;
  tableDatas: Array<Array<any>>;
}

我的table.component.html

<table class='table' *ngIf="tables">
  <thead>
    <tr>
      <th *ngFor="let tableColumn of tables.tableColumns">{{ tableColumn }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let tableData of tables.tableDatas">
      <td *ngFor="let data of tableData">{{ data }}</td>
    </tr>
  </tbody>
</table>

- Stephen Himes