角度 *ngfor 显示表格答案

【问题标题】：angular *ngfor to display table角度 *ngfor 显示表格
【发布时间】：2022-01-24 15:50:12
【问题描述】：

当我使用 *ng-for 循环调用对象列表时，我在表上得到了多个相同的值。

例如：如果对象列表是：

objList = [{value:value1}]

它将返回一个包含一行的表格

但如果对象列表有多个值：

objList = [{value:value1},{value:value2},{value:value3}]

当数组列表的长度例如为3时，它会显示一个有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>

【问题讨论】：

这个 pTemplate 在哪里使用？似乎它已经呈现了您的项目，并且您通过 ngFor 指令复制了此行为

标签： html angular typescript primeng

【解决方案1】：

你不应该使用 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 中的单个项目

【讨论】：