我需要在Angular2中做相同的事情:
<?php foreach ($somethings as $something) { foreach ($something->children as $child) { echo '<tr>...</tr>'; } }
这可以通过ngFor实现,而不是在 <table> 和 <tr> 之间添加新元素吗?
<table>
<tr>
我有一个可能类似于你想要的样本:
<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>
我使用它来渲染一个看起来像网格的电子表格:http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet
如果需要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>
使用ngFor语法的'template'形式,如下所示 . 它比简单的 *ngFor 版本更冗长,但这就是你如何在没有输出html的情况下实现循环(直到你打算) . 一个例外:你仍然可以在你的 <table> 中获得HTML评论,但我确定了.2607341 . 这是一个有效的傻瓜:http://plnkr.co/edit/KLJFEQlwelPJfNZYVHrO?p=preview
*ngFor
@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']}, ] }
我只是在尝试数据库中任何表的显示数据 . 我是这样做的:
我对Table.component.ts中的API的TypeScript Ajax调用:
http.get<ITable>(url, params).subscribe(result => { this.tables = result; }, error => console.error(error));
我的ITable
interface ITable { tableName: string; tableColumns: Array<string>; tableDatas: Array<Array<any>>; }
我的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>
4 回答
我有一个可能类似于你想要的样本:
我使用它来渲染一个看起来像网格的电子表格:http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet
如果需要2个或更多foreach循环来绘制表格的行,则需要执行与以下操作类似的操作 .
使用ngFor语法的'template'形式,如下所示 . 它比简单的
*ngFor
版本更冗长,但这就是你如何在没有输出html的情况下实现循环(直到你打算) . 一个例外:你仍然可以在你的<table>
中获得HTML评论,但我确定了.2607341 . 这是一个有效的傻瓜:http://plnkr.co/edit/KLJFEQlwelPJfNZYVHrO?p=preview我只是在尝试数据库中任何表的显示数据 . 我是这样做的:
我对Table.component.ts中的API的TypeScript Ajax调用:
我的ITable
我的table.component.html