Angular Material 5.2.4 mat-sort-header排序异常问题求助

你遇到的这个排序问题在使用mat-sort时挺常见的，尤其是当数据源字段不是简单类型或者字段匹配出问题的时候。结合你的场景，我给你几个排查和解决的方向：

1. 先排查数据源的字段问题 #

首先聚焦那些排序异常的列，检查projectlist里对应的字段是否存在这些情况：

• 字段类型混乱：比如某列里既有字符串，又有null/undefined或者数字，mat-sort默认的比较逻辑会把特殊值排到最前面，就会出现“一条数据置顶，其余乱序”的现象。
• 字段名不匹配：matColumnDef的名称（比如你的"Status"）要和数据源对象的属性名完全一致（包括大小写），如果拼写错了，mat-sort找不到对应字段，排序逻辑就会失效。
• 字段是复杂对象：如果列对应的是嵌套对象（比如Status是包含value和label的对象），mat-sort默认会比较对象的引用地址，而不是你想要的显示文本/数值，这必然会导致排序混乱。

2. 自定义排序访问器（Sorting Data Accessor） #

如果你的列对应复杂对象，或者需要自定义排序逻辑，给MatTableDataSource设置sortingDataAccessor就能解决问题。举个例子：

ngOnInit() {
  this.dataSource = new MatTableDataSource(this.projectlist);
  
  // 告诉mat-sort该取哪个值来做排序比较
  this.dataSource.sortingDataAccessor = (item, property) => {
    switch(property) {
      // 假设Status是对象，我们取它的displayName字段来排序
      case 'Status': return item.Status?.displayName || '';
      // 其他需要自定义的列都可以在这里添加逻辑
      default: 
        // 默认情况直接取字段值，处理null/undefined避免报错
        return item[property] || '';
    }
  };
}

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

3. 确认初始化顺序与异步数据处理 #

如果你的projectlist是通过异步请求获取的（比如HTTP接口），当前的初始化逻辑可能有问题：

• 如果ngOnInit执行时projectlist还没拿到，后续数据加载完成后需要重新设置dataSource.data = this.projectlist，并且确保sort已经绑定。
• 可以把数据源初始化放在数据获取完成的回调里，比如：

ngOnInit() {
  this.yourProjectService.getProjects().subscribe(projects => {
    this.projectlist = projects;
    this.dataSource = new MatTableDataSource(this.projectlist);
    this.dataSource.sort = this.sort;
    // 同时设置自定义排序访问器
    this.dataSource.sortingDataAccessor = ...;
  });
}

4. 用简单数据测试定位问题 #

你可以先把projectlist换成一组极简的测试数据，比如：

this.projectlist = [
  {id: 1, Status: 'Active', Name: 'Project A'},
  {id: 2, Status: 'Inactive', Name: 'Project B'},
  {id: 3, Status: 'Active', Name: 'Project C'}
];

如果用这个测试数据排序正常，那说明问题肯定出在你原来的projectlist数据结构上，重点排查那些排序异常列的字段值即可。

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