Mat-table重置mat-sort至初始状态时表头箭头未更新的问题

这个坑我之前踩过好几次——明明排序逻辑已经重置回初始状态了，表头的箭头却死活停留在之前的列上。本质原因是MatSort组件不会自动监听matSortActive和matSortDirection这两个输入属性的变更来更新表头视图，得用它提供的官方API主动触发状态同步才行。

下面是亲测有效的解决步骤：

1. 先获取MatSort实例 #

首先在组件里通过@ViewChild注入MatSort的实例，这样我们才能直接操作它的内部状态：

import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

export class YourTableComponent implements AfterViewInit {
  // 你的表格数据源（以MatTableDataSource为例）
  dataSource = new MatTableDataSource(yourTableData);
  
  // 注入MatSort实例
  @ViewChild(MatSort) sort!: MatSort;

  // 保存初始排序配置，方便后续重置
  initialSortConfig = {
    active: 'your-default-column', // 替换成你的初始排序列名
    direction: 'asc' as 'asc' | 'desc' | ''
  };

  ngAfterViewInit() {
    // 初始化时把sort绑定到数据源
    this.dataSource.sort = this.sort;
    // 同时设置初始排序状态，确保表头箭头一开始就正常显示
    this.sort.sort(this.initialSortConfig);
  }
}

2. 重置排序时用MatSort API触发更新 #

别直接在模板里修改matSortActive和matSortDirection！写一个重置按钮的点击事件处理函数，通过MatSort的方法来更新状态，这样表头箭头才会同步变化：

resetToInitialSort() {
  // 1. 先确保数据源的排序逻辑同步重置
  this.dataSource.sort = this.sort;

  // 2. 使用MatSort的sort方法设置初始状态，这会自动触发表头UI更新
  this.sort.sort(this.initialSortConfig);

  // 某些复杂场景下如果箭头还是没更新，可以手动触发排序变更事件
  // this.sort.sortChange.emit(this.initialSortConfig);
}

3. 模板对应调整 #

模板里的表格只需要绑定matSort到我们注入的实例即可，初始状态会在ngAfterViewInit里自动设置：

<table mat-table [dataSource]="dataSource" matSort>
  <!-- 示例列定义 -->
  <ng-container matColumnDef="your-default-column">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> 默认排序列 </th>
    <td mat-cell *matCellDef="let item"> {{ item.targetProperty }} </td>
  </ng-container>

  <!-- 其他列定义... -->

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<button mat-raised-button (click)="resetToInitialSort()">重置为初始排序</button>

为什么直接改属性没用？ #

因为matSortActive和matSortDirection只是MatSort的输入属性，组件内部并没有为它们设置变更检测来联动更新表头的箭头状态。只有当通过sort()方法触发排序，或者手动触发sortChange事件时，MatSort才会同步更新表头的UI状态。

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