Angular 9中Mat-Table的MatSort排序失效，无报错如何修复？

以下是针对你代码中存在的问题及修复步骤：

1. 补充 MatSort 实例的获取逻辑 #

你的组件类中缺少通过 @ViewChild 获取 MatSort 实例的代码，这是排序功能生效的核心前提：

import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

// 组件类内部添加
@ViewChild(MatSort, { static: false }) sort: MatSort;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;

Angular 9 中 static 设为 false 即可，确保视图初始化后能正确获取到实例。

2. 修正排序字段不匹配问题 #

观察你的 HTML 代码，ref_no 列的 matColumnDef 值为 ref_no，但单元格绑定的是 element.reg_no，MatSort 默认会用 matColumnDef 的值作为排序依据的字段名，这会导致排序时找不到对应数据字段。

两种修复方式任选其一：

• 方式一：同步修改 matColumnDef 与数据字段名，并更新 displayedColumns 对应项

<ng-container matColumnDef="reg_no">
  <th class="mn50" mat-header-cell *matHeaderCellDef mat-sort-header> Reg. Ref. No. </th>
  <td class="mn50" mat-cell *matCellDef="let element"> {{element.reg_no}} </td>
</ng-container>

• 方式二：给 mat-sort-header 显式指定数据字段名

<th class="mn50" mat-header-cell *matHeaderCellDef mat-sort-header="reg_no"> Reg. Ref. No. </th>

3. 确认 Material 模块已正确导入 #

确保当前组件所在模块（如 AppModule）中导入了所需的 Material 模块：

import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  imports: [
    // ...其他业务模块
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ]
})
export class YourModule { }

4. 校验 displayedColumns 配置 #

确认组件类中的 displayedColumns 数组包含所有需要显示的列定义名称，例如：

// 若用方式一修复了ref_no列，这里要改为'reg_no'
displayedColumns: string[] = ['slno', 'official_name', 'baptism_name', 'fam_name', 'ref_no'];

5. 优化数据源绑定时机 #

由于 *ngIf="tblength > 0" 会延迟表格渲染，可能导致 Sort 实例绑定不及时，可在订阅回调中添加延迟确保视图初始化完成：

this.dataService.GetList().subscribe(resdata => {
  this.tblength = resdata.length;
  this.load = false;
  this.dataSource = new MatTableDataSource(resdata);
  // 延迟绑定确保视图元素已初始化
  setTimeout(() => {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  });
});

内容的提问来源于stack exchange，提问作者Vishnu .T.D