I need to do an equivalent of this in Angular2:
<?php
foreach ($somethings as $something) {
foreach ($something->children as $child) {
echo '<tr>...</tr>';
}
}
Can this be achieved with ngFor and not adding new elements between <table> and <tr>?
I have a sample that might be similar to what you want:
<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>
I use this to render out a spreadsheet looking grid as seen here: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet
If you need 2 or more foreach loops to draw rows of a table you need to do similar to the following.
<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>
Use the 'template' form of the ngFor syntax, seen here. It's a bit more verbose than the simpler *ngFor version, but this is how you achieve looping without output html (until you intend to). One exception: you'll still get html comments within your <table> but I'm hoping that's ok. Here's a working 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']},
]
}