Angular2 nested ngFor

Ich tun müssen, um ein äquivalent in Angular2:

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

Kann dies erreicht werden mit ngFor und nicht das hinzufügen von neuen Elementen zwischen <table> und <tr>?

Kommentar zu dem Problem
die Verwendung von ng-repeat in Ihren html Kommentarautor: danday74
ps: Sie können nest ng-repeat Kommentarautor: danday74
ng-repeat? Es;s keine ng-repeat in angular2? Sie schlagen vor Wechsel zu Winkel-1.x? Kommentarautor: Okneloper
Es bearbeitet wurde nicht von mir, sondern von einer anderen person. Die ersten Fragen, die version hatte Angular2 doppelt angegeben, wie es funktioniert, jetzt aber. Kommentarautor: Okneloper

InformationsquelleAutor der Frage Okneloper | 2016-02-06

  1. 18

    Habe ich ein Beispiel, das vielleicht ähnlich zu dem, was Sie wollen:

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

    Ich diese zu machen, eine Tabellenkalkulation nach raster wie hier zu sehen: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

    InformationsquelleAutor der Antwort TGH

  2. 7

    Wenn Sie brauchen 2 oder mehr foreach-Schleifen, zeichnen, Zeilen einer Tabelle, die Sie benötigen, zu tun, die der folgenden ähnelt.

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

    InformationsquelleAutor der Antwort Chris Snowden

  3. 4

    Verwenden Sie die 'Vorlage' in form der ngFor syntax, hier zu sehen. Es ist ein bisschen Ausführlicher als die einfachere *ngFor version, aber das ist, wie Sie erreichen looping ohne html-Ausgabe (bis Sie wollen). Mit einer Ausnahme: erhalten Sie noch html-Kommentare in Ihrem <table> aber ich hoffe, dass ist ok. Hier ist eine funktionierende 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']},
  ]
}

    InformationsquelleAutor der Antwort Tim Kindberg

  4. 0

    Ich versuche nur, die Anzeige von Daten für eine Tabelle in meiner db. Ich habe es wie folgt aus:

    Mein Typoskript Ajax-Aufruf von API in der Tabelle.Komponente.ts:

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

    Meine ITable

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

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

    InformationsquelleAutor der Antwort Stephen Himes

Schreibe einen Kommentar