Angular Material表格：点击行获取指定单元格内容存入变量

别担心，这个需求其实很好实现——既然你已经能拿到整行的数据，只需要从行对象里直接提取你要的属性就行，完全不用去操作DOM。我给你一步步拆解：

第一步：确保模板里的行绑定了点击事件 #

先检查你的mat-table模板，确保每一行都绑定了点击事件，并把当前行的数据传进去：

<table mat-table [dataSource]="dataSource">
  <!-- 你的列定义（比如mat-header-cell、mat-cell）... -->
  
  <!-- 行定义，这里绑定点击事件并传入当前行数据 -->
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRowClick(row)"></tr>
</table>

第二步：在TypeScript里提取指定列内容并存入变量 #

在你的组件类里，先定义一个变量用来存储选中的内容，然后写点击事件的处理方法：

// 先定义存储变量，根据你要的内容类型调整（比如string/number等）
selectedTargetValue: string;

// 行点击处理方法
onRowClick(row: any) {
  // 把'yourTargetProperty'换成你实际要提取的列对应的属性名
  // 比如你的数据是{id: 1, username: 'johndoe', role: 'admin'}，要拿username就写row.username
  this.selectedTargetValue = row.yourTargetProperty;
  
  // 可以打印验证一下
  console.log('选中的内容:', this.selectedTargetValue);
}

进阶：用强类型让代码更规范 #

如果你的表格数据是固定结构的，建议定义一个接口，这样代码更清晰也不容易出错：

// 定义数据接口，和你的表格数据结构完全对应
interface TableData {
  id: number;
  username: string;
  role: string;
}

// 组件里的变量指定明确类型
selectedUsername: string;

// 方法参数也指定类型
onRowClick(row: TableData) {
  this.selectedUsername = row.username;
}

这样处理后，selectedTargetValue（或你自定义的变量名）就存储了你点击行指定列的内容，后续在组件的其他逻辑里直接用这个变量就行啦。

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