Angular 8中Mat-Table排序功能无法显示及生效问题求助

以下是几个可直接排查的方向：

• Angular Material主题未正确引入
  Angular Material组件的样式完全依赖主题文件，若全局样式文件（比如styles.scss）里没引入主题，排序表头的光标样式会直接缺失。确保添加了类似代码：

  @import '~@angular/material/prebuilt-themes/indigo-pink.css';
  

  Angular 8中需要用~指向node_modules路径，别漏写。

• Sort模块导入不完整
  哪怕控制台没报错，也可能是模块导入环节有遗漏。在你的模块文件（比如app.module.ts）里，除了导入MatSortModule，必须在imports数组里声明，同时组件内要正确关联MatSort和表格数据源：

  import { MatSortModule } from '@angular/material/sort';
  import { MatTableModule } from '@angular/material/table';
  
  @NgModule({
    imports: [
      // ...其他依赖模块
      MatTableModule,
      MatSortModule
    ]
  })
  

  组件类中：

  @ViewChild(MatSort) sort: MatSort;
  
  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }
  

• 表头元素未绑定正确指令
  检查模板代码，必须给<th>元素加上mat-sort-header指令，同时表格元素要绑定[matSort]属性：

  <table mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 序号 </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>
    <!-- 其他列定义 -->
  </table>
  

  没加mat-sort-header的表头不会触发排序光标样式。

• 版本不兼容
  Angular 8对应固定版本的Angular Material，若安装的Material版本过高或过低，会出现样式/功能适配问题。执行命令安装匹配版本：

  npm install @angular/material@8.x.x @angular/cdk@8.x.x
  

  确保Material版本号和你的Angular 8版本完全匹配（比如Angular 8.2.14对应Material 8.2.3）。

• 自定义样式覆盖默认样式
  检查是否有全局自定义样式无意中覆盖了Material的表头光标样式。可以用浏览器开发者工具查看th.mat-sort-header的样式，确认cursor: pointer属性是否存在，若被覆盖则调整自定义样式的优先级。

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