Angular13表格行展开报错：Cannot read properties of undefined (reading 'id')

核心原因分析 #

这个错误几乎都是因为新增的空白/未初始化记录在RowExpansion模板中被读取了id属性，但该记录的id字段未定义。PrimeNG的RowExpansion会在表格渲染时遍历所有行数据，包括刚新增的未完成记录，当模板里直接绑定row.id但新增记录的id还没赋值时就会抛出这个错误。

具体排查与修复步骤 #

1. 规范新增记录的初始化逻辑 #

新增记录时必须给id字段赋初始值（哪怕是临时占位值，比如null、空字符串''）：

// 错误写法：未初始化id字段
addNewRecord() {
  this.data.push({});
}

// 正确写法：初始化所有必填字段
addNewRecord() {
  this.data.push({ id: null, name: '', /* 其他字段默认值 */ });
}

2. 在RowExpansion模板中添加空值保护 #

使用Angular安全导航操作符?.避免访问未定义属性，同时可以给默认值优化用户体验：

<!-- 错误写法：直接访问row.id -->
<p-table [value]="data">
  <ng-template pTemplate="rowexpansion" let-row>
    <tr>
      <td colspan="6">
        记录ID：{{row.id}}
      </td>
    </tr>
  </ng-template>
</p-table>

<!-- 正确写法：添加空值保护 -->
<p-table [value]="data">
  <ng-template pTemplate="rowexpansion" let-row>
    <tr>
      <td colspan="6">
        记录ID：{{row?.id || '待分配'}}
      </td>
    </tr>
  </ng-template>
</p-table>

3. 控制新增记录的展开状态 #

如果新增记录不需要默认展开，手动维护展开状态对象，确保新增记录默认处于关闭状态：

// 组件内维护展开状态
expandedRows: { [key: string]: boolean } = {};

addNewRecord() {
  const newRow = { id: `temp-${Date.now()}`, /* 其他字段 */ };
  this.data = [...this.data, newRow]; // 用扩展运算符保证数组引用更新
  this.expandedRows[newRow.id] = false; // 强制关闭新增记录的展开状态
}

<!-- 模板中绑定展开状态 -->
<p-table [value]="data" [expandedRowKeys]="expandedRows">
  <!-- 表格列与展开模板 -->
</p-table>

4. 核对PrimeNG与Angular版本兼容性 #

Angular13必须搭配PrimeNG 13.x版本，版本不匹配会导致渲染逻辑异常。可以通过package.json确认版本，若不匹配执行对应版本安装：

npm install primeng@13.x --save

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