Je dois faire un équivalent de ceci dans Angular2 :
<?php
foreach ($somethings as $something) {
foreach ($something->children as $child) {
echo '<tr>...</tr>';
}
}
Cela peut-il être réalisé avec ngFor et sans ajouter de nouveaux éléments entre <table>
et <tr>
?
J'ai un échantillon qui pourrait ressembler à ce que vous voulez:
<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>
J'utilise ceci pour afficher une grille ressemblant à une feuille de calcul, comme indiqué ici: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet
Si vous avez besoin d'au moins deux boucles foreach pour dessiner les lignes d'un tableau, procédez comme suit.
<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>
Utilisez la forme 'template' de la syntaxe ngFor, vue ici. C'est un peu plus détaillé que la version plus simple de *ngFor
, mais c'est comme cela que vous réalisez une boucle sans sortie html (jusqu'à ce que vous ayez l'intention de le faire). Une exception: vous aurez toujours des commentaires HTML dans votre <table>
mais j'espère que ça ira. Voici un exemple de travail: 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']},
]
}
J'essaye juste d'afficher des données pour n'importe quelle table de ma base de données. Je l'ai fait comme ça:
Mon appel Ajax TypeScript à l'API dans table.component.ts:
http.get<ITable>(url, params).subscribe(result => {
this.tables = result;
}, error => console.error(error));
Mon ITable
interface ITable {
tableName: string;
tableColumns: Array<string>;
tableDatas: Array<Array<any>>;
}
Mon 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>