Angular中如何获取HTML表格单元格数据并传递给组件ts文件变量

现有写法的核心问题 #

• [(ngModel)]仅支持<input>、<select>等表单控件，<tr>是普通表格行元素，不支持双向绑定，该写法无实际作用
• change事件仅在可交互表单元素的值发生变更时触发，<tr>不会触发该事件，所以你绑定的回调函数根本不会执行

实现方案 #

你可以根据自己的需求选择以下两种方案：

方案1：数据填充后自动获取

因为你的表格只有1行数据，在你点击按钮给empData赋值完成后，直接取数组第一项的对应字段即可，无需绑定事件：

// 你原有点击按钮触发的加载数据方法
loadEmpData() {
  // 原有请求接口/给empData赋值的逻辑
  this.empData = [/* 你返回的单行员工数据 */];
  // 赋值完成直接取对应字段
  this.selectedFirstName = this.empData[0]?.firstName ?? '';
}

方案2：点击表格行时获取值

如果需要用户点击行的时候才取值，直接在行点击事件里把当前行的字段值传给回调函数即可，不需要处理event对象：

1. HTML修改为：

<tr *ngFor="let d of empData" (click)="selectChangeEmpHandler(d.firstName)">
  <td >{{d.id}}</td>
  <td>{{d.firstName}}</td>
  <td>{{d.lastName}}</td>
  <td>{{d.age}}</td>
  <td>{{d.dateOfBirth}}</td>
</tr>

2. TS代码修改为：

selectedFirstName: string = "";
selectChangeEmpHandler(firstName: string){
  this.selectedFirstName = firstName;
}

如果需要获取其他单元格的值，只需要修改传入回调的参数即可，比如要拿id就传d.id，要拿全名就传d.firstName + ' ' + d.lastName。

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