change - router angular navigationend

Angular2 anidado ng para

Question

Necesito hacer un equivalente de esto en Angular2 :

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

¿Se puede lograr esto con ngFor y no agregar nuevos elementos entre <table> y <tr> ?

Answer 1

Sólo estoy tratando de mostrar datos para cualquier tabla en mi db. Lo hice así:

Mi TypeScript Ajax llama a API en table.component.ts:

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

Mi ITable

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

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

Answer 2

Si necesita 2 o más bucles foreach para dibujar filas de una tabla, debe hacer algo similar a lo siguiente.

<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

Tengo una muestra que podría ser similar a lo que quieres:

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

Utilizo esto para representar una cuadrícula de hoja de cálculo como se ve aquí: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

Answer 4

Utilice la forma ''plantilla'' de la sintaxis ngFor, que se ve aquí. Es un poco más detallado que la versión más simple *ngFor , pero así es como se logra un bucle sin salida de html (hasta que tiene la intención de hacerlo). Una excepción: todavía obtendrás comentarios html dentro de tu <table> pero espero que esté bien. Aquí hay un plunkr de trabajo: 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'']},
]
}