点击Angular Material表格行时如何获取选中行的HTMLTableCellElement

你可以通过给行元素绑定点击事件，直接从事件对象中获取对应的单元格DOM元素，无需用ViewChild遍历获取，实现步骤如下：

步骤1：修改表格模板 #

在你的app.component.html中，给<mat-row>标签添加点击事件，传入事件对象$event：

<mat-row 
  *matRowDef="let row; columns: displayedColumns;"
  (click)="onRowClick($event)"
></mat-row>

步骤2：组件中添加点击事件处理逻辑 #

在app.component.ts中实现onRowClick方法，即可获取对应的单元格元素：

import { Component } from '@angular/core';

// 其余原有代码保持不变...

@Component({
  // 原有配置不变
})
export class AppComponent {
  // 原有属性、方法不变...

  onRowClick(event: MouseEvent) {
    // 场景1：获取你点击位置对应的单个单元格元素
    const targetCell = (event.target as HTMLElement).closest('td') as HTMLTableCellElement;
    console.log('选中的单元格元素：', targetCell);

    // 场景2：如果需要获取当前点击行的所有单元格元素，可通过行元素获取
    const currentRow = event.currentTarget as HTMLTableRowElement;
    const allRowCells = Array.from(currentRow.cells) as HTMLTableCellElement[];
    console.log('当前行全部单元格：', allRowCells);
  }
}

说明 #

• 用closest('td')是为了避免点击到单元格内部嵌套的子元素时，拿到的不是td元素本身，兼容性更强
• 事件对象的currentTarget始终指向绑定了点击事件的<mat-row>（也就是渲染后的<tr>元素），可以直接通过它的cells属性拿到整行的所有单元格实例
• 打印出来的HTMLTableCellElement就是你需要的原生DOM对象，和你预期的输出效果一致

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