[英]Angular2 nested ngFor
I need to do an equivalent of this in Angular2 : 我需要在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>
? 这可以通过ngFor实现,而不是在<table>
和<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 我使用它来渲染一个看起来像网格的电子表格: 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. 如果需要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>
Use the 'template' form of the ngFor syntax, seen here. 使用ngFor语法的“模板”形式,如此处所示。 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). 它比简单的*ngFor
版本更冗长,但这就是你如何在没有输出html的情况下实现循环(直到你打算这样做)。 One exception: you'll still get html comments within your <table>
but I'm hoping that's ok. 一个例外:你仍然会在<table>
获得HTML注释,但我希望没问题。 Here's a working plunkr: http://plnkr.co/edit/KLJFEQlwelPJfNZYVHrO?p=preview 这是一个有效的插件: 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']},
]
}
template does not work for me but ng-template with ngForOf do the trick: 模板对我不起作用,但使用ngForOf的ng-template可以解决问题:
<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>
I am just trying display data for any table in my db. 我只是在尝试数据库中任何表的显示数据。 I did it like this: 我是这样做的:
My TypeScript Ajax call to API in table.component.ts: 我对Table.component.ts中的API的TypeScript Ajax调用:
http.get<ITable>(url, params).subscribe(result => {
this.tables = result;
}, error => console.error(error));
My ITable 我的ITable
interface ITable {
tableName: string;
tableColumns: Array<string>;
tableDatas: Array<Array<any>>;
}
My table.component.html 我的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.