angular *ngfor 显示 table
angular *ngfor to display table
当我用 *ng-for 循环调用对象列表时,我在 table 上得到了多个相同的值。
例如:
如果对象列表是:
objList = [{value:value1}]
它将 return 一个 table 一行
但如果对象列表有多个值:
objList = [{value:value1},{value:value2},{value:value3}]
例如数组列表的长度为3时,会显示一个table有9个值:
value1
value2
value3
value1
value2
value3
value1
value2
value3
我的 HTML 代码(使用 Prime-NG):
<ng-template pTemplate="body">
<tr *ngFor="let permissionOrder of objectList">
<td>{{permissionOrder.value}}</td>
</tr>
</ng-template>
你不应该使用 ngFor。而是像
一样使用它
<p-table [value]="objList">
<ng-template pTemplate="header">
<tr>
<th>Orders</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-permissionOrder>
<tr>
<td>{{permissionOrder.value}}</td>
</tr>
</ng-template>
</p-table>
Prime ng 将自动遍历数组,您将在 permissionOrder
中获得单个项目
当我用 *ng-for 循环调用对象列表时,我在 table 上得到了多个相同的值。
例如: 如果对象列表是:
objList = [{value:value1}]
它将 return 一个 table 一行
但如果对象列表有多个值:
objList = [{value:value1},{value:value2},{value:value3}]
例如数组列表的长度为3时,会显示一个table有9个值:
value1
value2
value3
value1
value2
value3
value1
value2
value3
我的 HTML 代码(使用 Prime-NG):
<ng-template pTemplate="body">
<tr *ngFor="let permissionOrder of objectList">
<td>{{permissionOrder.value}}</td>
</tr>
</ng-template>
你不应该使用 ngFor。而是像
一样使用它<p-table [value]="objList">
<ng-template pTemplate="header">
<tr>
<th>Orders</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-permissionOrder>
<tr>
<td>{{permissionOrder.value}}</td>
</tr>
</ng-template>
</p-table>
Prime ng 将自动遍历数组,您将在 permissionOrder
中获得单个项目