Angular2 вложенный ngFor

Мне нужно сделать эквивалент этого в Angular2:

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

Можно ли это сделать с помощью ngFor и не добавлять новые элементы между <table> и <tr>?

Ответ 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

Ответ 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>

Ответ 3

Используйте "шаблонную" форму синтаксиса ngFor, которую можно увидеть здесь. Это немного более многословно, чем в простой версии *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']},
  ]
}

Ответ 4

Я просто пытаюсь отобразить данные для любой таблицы в моей БД. Я сделал это так:

Мой 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>>;
}

Моя таблица .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>

Ответ 5

шаблон не работает для меня, но ng-template с ngForOf добиваются цели:

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