Angular Material Table：TS代码切换排序时箭头显示异常

开发Angular 16项目时，使用Angular Material的mat-table并启用排序功能，排序逻辑本身正常，但通过TS代码修改排序配置后，列标题的排序箭头无法同步更新。

HTML代码 #

<div class="cpage">
  <div class="left-margin"></div>
  <div class="left">
    <form-card header="Left" [enableBottomPadding]="true">
      <button mat-raised-button (click)="actionB1()">B1</button>
    </form-card>
  </div>
  <div class="gap-between"></div>
  <div class="right">
    <form-card header="DataTable" [enableBottomPadding]="true">
      <div style="width: 100%; max-height:90vh; overflow-x:auto">
        <mat-table [dataSource]="dataSource" matSort #sort1="matSort">
          <ng-container matColumnDef="position">
            <mat-header-cell mat-sort-header *matHeaderCellDef> No.</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{ element.position }}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="name">
            <mat-header-cell mat-sort-header *matHeaderCellDef> Name</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{ element.name }}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="weight">
            <mat-header-cell mat-sort-header *matHeaderCellDef> Weight</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{ element.weight }}</mat-cell>
          </ng-container>

          <!-- additional weight columns -->
          <ng-container matColumnDef="weight1">
            <mat-header-cell *matHeaderCellDef> Weight</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{ element.weight }}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="symbol">
            <mat-header-cell *matHeaderCellDef> Symbol</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{ element.symbol }}</mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
      </div>
    </form-card>
  </div>
  <div class="right-margin"></div>
</div>

TS代码 #

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

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
];

@Component({
  selector: 'app-debug-table',
  templateUrl: './debug-table.component.html',
  styleUrls: ['./debug-table.component.scss']
})
export class DebugTableComponent implements AfterViewInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'weight1', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  @ViewChild('sort1', { static: false }) sort1: MatSort;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.dataSource.sort = this.sort1;
  }

  actionB1() {
    if (this.sort1.active == 'name') {
      this.sort1.active = 'weight';
    } else {
      this.sort1.active = 'name';
    }
    this.dataSource.sort = this.sort1;
    this.cdr.detectChanges();
  }
}

问题详情 #

点击B1按钮在name和weight字段间切换排序时，数据排序正常，但mat-sort-header的排序箭头无法跟随更新。

已尝试操作：

• 确认导入Angular Material的排序模块；
• 检查matSort和mat-sort-header已正确添加到表格和表头单元格；
• 更新排序后调用detectChanges()尝试刷新视图。

使用环境：Angular 16，Angular Material 16

解决方案 #

直接修改sort1.active仅改变属性值，不会触发MatSort内部的状态更新和视图刷新逻辑。需要调用MatSort提供的sort()方法来触发排序状态变更，该方法会同步更新表头箭头显示：

修改actionB1方法如下：

actionB1() {
  // 切换目标列
  const targetColumn = this.sort1.active === 'name' ? 'weight' : 'name';
  // 保持当前排序方向，默认升序
  const targetDirection = this.sort1.direction || 'asc';
  
  // 调用sort方法触发状态更新
  this.sort1.sort({
    id: targetColumn,
    start: targetDirection,
    disableClear: false
  });
}

原理说明 #

sort()方法会触发MatSort的sortChange事件，通知所有关联的mat-sort-header更新自身的排序状态（包括箭头方向和激活状态），这是Angular Material设计的官方交互方式，直接修改属性无法触发该事件流程。

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