Angular集成PrimeNG表格时出现数据重复渲染、行数异常问题

问题原因 #

你的p-table用法存在重复遍历的问题：

• PrimeNG的p-table组件在指定[value]="projects"属性后，pTemplate="body"的模板会自动遍历projects数组的每一项，不需要额外在内部的<tr>标签上再加*ngFor循环。
• 两层遍历叠加就会出现「数据行数=数组长度平方」的问题，和ts文件没有关系。

修复方法 #

修改itemlist.component.html中body模板的代码即可，推荐使用第一种写法：

写法1：使用p-table自动提供的单行变量 #

p-table的body模板会默认把当前遍历到的单条数据注入为$implicit变量，直接声明使用即可：

<ng-template pTemplate="body" let-pjt> 
  <tr>
    <td style="text-align: center;">{{ pjt.customer_name }}</td>
    <td style="text-align: center; width: 15vw;">{{ pjt.project_name_jp }}</td>
    <td style="text-align: center;">{{ pjt.business_divition }}</td>
    <td style="text-align: center;">{{ pjt.rank }}</td>
    <td style="text-align: center;">{{ pjt.order_amount }}</td>
    <td style="text-align: center;">{{ pjt.customer_area }}</td>
  </tr>
</ng-template>

写法2：保留自写的*ngFor，去掉p-table的value属性 #

如果要自己控制循环逻辑，就把p-table标签上的[value]="projects"属性删除即可，该写法会丢失p-table内置的排序、分页、过滤等依赖value属性的功能，不推荐使用。

内容的提问来源于stack exchange，提问作者user16558324