Angular中循环二维数组时p-table为何重复渲染两次？

问题原因 #

你的代码存在两个核心问题导致表格行重复：

1. PrimeNG pTemplate 指令语法错误，写成了 p template="body"，正确格式应为 pTemplate="body"，错误语法会引发模板重复解析。
2. 未给 p-table 指定数据源 [value]，表格会继承父循环上下文，导致行重复渲染。

修正后的代码 #

TypeScript 代码（保持不变）

headers = ['Header1', 'Header2']
test = [['Test1', 'Test2'], ['Test3', 'Test4', 'Test5']]

HTML 代码

<ng-container *ngFor="let h of headers; let i = index">
  <h2>{{ h }}</h2>
  <p-table [value]="test[i]">
    <!-- 自定义表头 -->
    <ng-template pTemplate="header">
      <tr>
        <th>Table{{i+1}}</th>
      </tr>
    </ng-template>
    <!-- 表格行模板 -->
    <ng-template pTemplate="body" let-row>
      <tr>
        <td>{{row}}</td>
      </tr>
    </ng-template>
  </p-table>
</ng-container>

关键修改说明 #

• 给 p-table 绑定 [value]="test[i]"，明确指定当前表格的数据源为 test 数组对应索引的子数组，表格会根据该数组长度渲染行，避免重复。
• 修正 pTemplate 指令语法，确保PrimeNG能正确识别模板。
• 利用 let-row 接收表格行数据，无需嵌套额外的 *ngFor——p-table 会自动遍历 value 绑定的数组，重复渲染body模板。

最终效果 #

修改后会得到你期望的结果：

• Header1对应表格仅渲染Test1、Test2各一行
• Header2对应表格仅渲染Test3、Test4、Test5各一行

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