Angular可滚动mat-table中滚动到选中项的实现问题

问题根源分析 #

你之前的代码失效主要有两个原因：

1. querySelectorAll('.highlight')返回的是NodeList集合，而非单个DOM元素，直接调用scrollIntoView()会报错，因为集合没有这个方法。
2. 设置highlight类后立即执行滚动操作时，Angular的变更检测尚未完成，DOM还未更新，此时无法找到目标元素。

解决方案步骤 #

1. 修正元素获取方式

由于选中项只会有一个，改用querySelector获取单个高亮元素，而非querySelectorAll：

const highlightElement = this.elem.nativeElement.querySelector('.highlight');

2. 等待视图更新后执行滚动

在设置selectedRowIndex后，需要等待Angular完成变更检测、DOM更新后再执行滚动。可以用两种方式实现：

方法一：使用setTimeout
延迟0ms触发宏任务，等待视图完成更新：

onRadarDotClick(targetLawId: number) {
  // 标记选中项，触发highlight类的添加
  this.selectedRowIndex = targetLawId;

  // 等待DOM更新后执行滚动
  setTimeout(() => {
    const targetElement = this.elem.nativeElement.querySelector('.highlight');
    if (targetElement) {
      targetElement.scrollIntoView({
        block: 'center', // 将元素滚动到容器中央
        behavior: 'smooth' // 平滑滚动效果，可选
      });
    }
  }, 0);
}

方法二：使用ChangeDetectorRef
手动触发变更检测，确保DOM同步更新：

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

constructor(private cdr: ChangeDetectorRef) {}

onRadarDotClick(targetLawId: number) {
  this.selectedRowIndex = targetLawId;
  // 手动触发变更检测，确保DOM更新
  this.cdr.detectChanges();
  
  const targetElement = this.elem.nativeElement.querySelector('.highlight');
  if (targetElement) {
    targetElement.scrollIntoView({ block: 'center' });
  }
}

3. 确认滚动容器（关键）

如果你的Mat-Table是包裹在自定义滚动容器内（比如带max-height和overflow: auto的div），需要确保滚动操作作用于正确的容器。例如：

<!-- 外层滚动容器 -->
<div #tableContainer class="table-container" style="max-height: 500px; overflow: auto;">
  <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" *ngIf="!isLoading">
    <!-- 表格内容 -->
  </mat-table>
</div>

此时可以通过ViewChild获取容器，手动计算滚动位置：

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('tableContainer') tableContainer: ElementRef<HTMLDivElement>;

onRadarDotClick(targetLawId: number) {
  this.selectedRowIndex = targetLawId;
  this.cdr.detectChanges();

  const targetElement = this.elem.nativeElement.querySelector('.highlight');
  if (targetElement && this.tableContainer) {
    const container = this.tableContainer.nativeElement;
    // 计算目标元素相对于容器的位置，设置容器的scrollTop
    container.scrollTop = targetElement.offsetTop - container.offsetTop - (container.clientHeight / 2) + (targetElement.clientHeight / 2);
  }
}

4. 可选：通过ViewChild直接获取表格行

给Mat-Row添加模板引用，直接通过行数据匹配目标元素，更精准：

<mat-row 
  #tableRow 
  *matRowDef="let row; columns: displayedColumns;"
  [ngClass]="{'highlight': selectedRowIndex == row.id}"
></mat-row>

组件中获取行列表并找到目标行：

import { ViewChildren, QueryList, ElementRef } from '@angular/core';

@ViewChildren('tableRow') tableRows: QueryList<ElementRef<HTMLTableRowElement>>;

onRadarDotClick(targetLawId: number) {
  this.selectedRowIndex = targetLawId;
  this.cdr.detectChanges();

  const targetRow = this.tableRows.find(row => row.nativeElement.classList.contains('highlight'));
  if (targetRow) {
    targetRow.nativeElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
  }
}

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