初学者求助：Angular Material表格选中行值获取与Cannot read property 'id' of undefined错误解决

嘿，这个问题我之前刚处理过！控制台报错Cannot read property 'id' of undefined的核心原因很直白：页面初始化时selectedRow还没有被赋值，处于undefined状态，这时候你直接在模板里访问selectedRow.id，就相当于在一个不存在的对象上读取属性，自然会抛出错误。

下面给你几种简单有效的解决办法，你可以根据自己的需求选择：

方法1：使用安全导航操作符（?.） #

这是Angular模板里处理undefined/null最常用的技巧，它会先检查selectedRow是否存在，只有当它不为undefined/null时才会访问后面的属性。

修改你模板里的代码：

<!-- 原来的写法会报错 -->
<!-- {{selectedRow.id}} -->

<!-- 修改后的安全写法 -->
{{selectedRow?.id}}

方法2：用*ngIf先判断选中行是否存在 #

如果需要显示更多选中行的信息，可以用*ngIf包裹相关内容，确保只有选中行存在时才渲染这段代码：

<div *ngIf="selectedRow" class="selected-row-info">
  选中行ID：{{selectedRow.id}}<br>
  选中行Caption：{{selectedRow.Caption}}
</div>

方法3：在组件类中初始化selectedRow #

除了模板层面的处理，你也可以在TypeScript代码里提前给selectedRow一个初始值，避免它一开始是undefined：

假设你的设备数据有对应的类型（比如Equipment），可以这样写：

// 先定义类型（如果没有的话）
interface Equipment {
  id: number;
  Caption: string;
  // 其他属性...
}

// 组件类里初始化selectedRow
selectedRow: Equipment = {} as Equipment;

highlight(row: Equipment){
  this.selectedRow = row;
  console.log(this.selectedRow);
}

如果不想定义类型，也可以直接初始化为空对象：

selectedRow: any = {};

highlight(row){
  this.selectedRow = row;
  console.log(this.selectedRow);
}

另外，顺便提一句：你当前的highlight方法已经正确把选中行赋值给selectedRow了，只要解决了初始状态的undefined问题，就能正常获取选中行的属性啦。

内容的提问来源于stack exchange，提问作者mahdi.gh