Angular Material Table多列初始排序：激活列升序其余降序实现

要实现初始时激活列升序排序，其余列首次点击默认降序的需求，需要从两个方面入手：正确初始化初始排序状态，以及修改非激活列的默认排序循环方向。

问题分析 #

你之前的代码存在两个核心问题：

1. 初始排序方向设置错误（你设为desc，但需求是激活列升序）；
2. 未修改非激活列的默认排序逻辑，Angular Material 默认首次点击列是升序，不符合你要的其余列降序要求。

解决方案 #

1. 模板配置：自定义列的排序循环方向 #

在模板中，给每个mat-sort-header设置sortDirectionCycle属性：

• 激活列（如orderColumn）保持默认循环['asc', 'desc', '']（升序→降序→取消）；
• 其余列设置循环为['desc', 'asc', '']（降序→升序→取消）。

示例模板代码：

<table matSort [matSortActive]="'orderColumn'" [matSortDirection]="'asc'">
  <!-- 激活列：orderColumn -->
  <ng-container matColumnDef="orderColumn">
    <th mat-header-cell *matHeaderCellDef mat-sort-header [sortDirectionCycle]="['asc', 'desc', '']">
      订单列
    </th>
    <td mat-cell *matCellDef="let element"> {{ element.orderColumn }} </td>
  </ng-container>

  <!-- 其余列示例：column1 -->
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef mat-sort-header [sortDirectionCycle]="['desc', 'asc', '']">
      列1
    </th>
    <td mat-cell *matCellDef="let element"> {{ element.column1 }} </td>
  </ng-container>

  <!-- 重复上述结构配置剩余3列 -->
  <ng-container matColumnDef="column2">
    <th mat-header-cell *matHeaderCellDef mat-sort-header [sortDirectionCycle]="['desc', 'asc', '']">
      列2
    </th>
    <td mat-cell *matCellDef="let element"> {{ element.column2 }} </td>
  </ng-container>

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

2. 组件逻辑：初始化排序状态 #

在组件的ngAfterViewInit钩子中（确保MatSort实例已加载），绑定数据源与排序组件，并设置初始排序状态：

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

// 定义你的数据类型
interface TableData {
  orderColumn: number;
  column1: string;
  column2: number;
  // 其他列字段
}

@Component({
  selector: 'app-your-table',
  templateUrl: './your-table.component.html',
  styleUrls: ['./your-table.component.css']
})
export class YourTableComponent implements AfterViewInit {
  displayedColumns: string[] = ['orderColumn', 'column1', 'column2', 'column3', 'column4'];
  // 替换为你的实际数据
  tableData: TableData[] = [/* 数据内容 */];
  dataSource = new MatTableDataSource<TableData>(this.tableData);

  @ViewChild(MatSort) sort!: MatSort;

  ngAfterViewInit(): void {
    // 绑定排序组件到数据源
    this.dataSource.sort = this.sort;

    // 设置初始排序：激活列升序
    const initialSortState: Sort = {
      active: 'orderColumn',
      direction: 'asc'
    };

    // 更新Sort实例状态
    this.sort.active = initialSortState.active;
    this.sort.direction = initialSortState.direction;
    // 触发排序变化事件，让数据源执行排序
    this.sort.sortChange.emit(initialSortState);
  }
}

关键说明 #

• sortDirectionCycle：控制列的排序方向切换顺序，直接修改即可覆盖Angular Material的默认行为；
• 必须在ngAfterViewInit中初始化排序：因为@ViewChild(MatSort)要等视图渲染完成后才能获取到实例；
• 触发sortChange.emit()：确保数据源能感知到排序状态变化，执行实际的数据排序。

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