如何在Mat Table数据加载时触发matSortChange并调用sortData函数

matSortChange事件默认仅在点击表格表头时触发，想实现Mat Table数据加载完成后，针对特定列自动触发该事件，调用sortData($event)函数，让数据加载后直接完成排序，该怎么做？

相关代码 #

模板代码

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Dessert (100g)</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat (g)</th>
    <th mat-sort-header="carbs">Carbs (g)</th>
    <th mat-sort-header="protein">Protein (g)</th>
  </tr>
</table>

组件排序函数

sortData(sort: Sort) {
  // 需要在表格数据加载时调用此函数，实现数据自动排序
}

解决方案 #

有两种高效的实现方式，既可以让数据自动排序，也能同步表头的排序UI状态：

方式一：直接调用排序函数并设置表头状态 #

数据加载完成后，手动构造Sort参数调用sortData，同时通过MatSort实例设置表头的排序状态，保证UI和数据一致。

1. 注入MatSort实例
   在组件中通过ViewChild获取MatSort：

import { MatSort, Sort } from '@angular/material/sort';
import { ViewChild, OnInit } from '@angular/core';

@Component({/* ... */})
export class YourTableComponent implements OnInit {
  @ViewChild(MatSort) sort!: MatSort;
  tableData: any[] = [];

  // ...
}

2. 数据加载后执行排序
   在获取数据的回调中执行排序逻辑（以按calories列降序为例）：

loadTableData() {
  this.yourDataService.fetchData().subscribe(data => {
    this.tableData = data;
    // 构造初始排序参数
    const initialSort: Sort = {
      active: 'calories',
      direction: 'desc' // 可选值：'asc'升序 | 'desc'降序 | ''无排序
    };
    // 设置表头的排序状态，显示对应图标
    this.sort.active = initialSort.active;
    this.sort.direction = initialSort.direction;
    // 调用排序函数处理数据
    this.sortData(initialSort);
  });
}

方式二：通过MatSort的sort方法触发事件 #

利用MatSort内置的sort()方法，传入排序配置后会自动触发matSortChange事件，无需手动调用sortData。

1. 同样先注入MatSort实例（和方式一步骤1一致）

2. 数据加载后触发排序

loadTableData() {
  this.yourDataService.fetchData().subscribe(data => {
    this.tableData = data;
    // 触发calories列的降序排序，自动触发matSortChange事件
    this.sort.sort({
      id: 'calories',
      start: 'desc',
      disableClear: false // 是否允许点击表头清除排序
    });
  });
}

关键注意点 #

• 确保MatSort实例已初始化：建议在ngAfterViewInit生命周期之后执行排序，或在数据回调中确认视图已就绪，避免出现sort为undefined的情况。
• 异步数据必须等待加载完成：只有数据完全获取后再执行排序，才能保证排序逻辑作用于完整的数据集。

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