mat-table添加mat-sort报错：Cannot set property 'sort' of undefined求助

兄弟，我之前也踩过这个mat-sort的坑！你遇到的Cannot set property 'sort' of undefined错误，大概率是下面几个常见问题没处理对，咱们一步步排查解决：

1. 先确认数据源是否提前初始化 #

很多时候报错是因为dataSource还没实例化，就直接给它赋值sort了。比如这种错误写法：

// 错误：dataSource只声明没初始化
dataSource: MatTableDataSource<YourDataType>;

ngAfterViewInit() {
  this.dataSource.sort = this.sort; // 这里dataSource是undefined，直接报错
}

正确做法：提前用空数组初始化数据源：

// 提前实例化，哪怕是空数据
dataSource = new MatTableDataSource<YourDataType>([]);

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

2. 检查ViewChild获取MatSort的配置 #

你在组件里获取MatSort的代码是不是配置对了？要注意Angular版本的差异：

• 如果你的MatSort是页面加载就存在的静态元素（没有被*ngIf这类条件指令包裹），要设置static: true：

@ViewChild(MatSort, { static: true }) sort!: MatSort;

• 如果是动态渲染的（比如被*ngIf控制显示隐藏），把static设为false，并且确保在ngAfterViewInit里执行赋值逻辑（这个钩子会在视图完全初始化后触发，动态元素此时已经渲染完成）：

@ViewChild(MatSort, { static: false }) sort!: MatSort;

3. 别漏了导入MatSortModule #

虽然你的mat-table之前能正常运行，但MatSort是独立的模块，必须在组件所属的模块里导入：

// 在你的xxx.module.ts文件中
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';

@NgModule({
  imports: [
    // ...其他你需要的模块
    MatTableModule,
    MatSortModule // 这个一定要加！
  ]
})
export class YourModule { }

4. 核对模板里的绑定是否正确 #

确保你的mat-table标签上添加了matSort指令，并且表头单元格要加上mat-sort-header：

<mat-table [dataSource]="dataSource" matSort>
  <!-- 示例列：表头必须加mat-sort-header才会触发排序 -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef mat-sort-header> 名称 </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{ row.name }} </mat-cell>
  </ng-container>
  
  <!-- 其他列的配置... -->
  
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

补充：如果是异步加载数据的情况 #

如果你的数据是通过HTTP请求异步获取的，记得在数据返回后再给数据源绑定sort：

this.yourDataService.fetchData().subscribe(data => {
  // 数据返回后实例化数据源并绑定sort
  this.dataSource = new MatTableDataSource(data);
  this.dataSource.sort = this.sort;
});

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