Angular 6中MatTable仅两列可排序，其余列排序失效求助

我来帮你排查这个MatSort排序失效的问题，核心原因是MatSort默认只能识别数据源中与列定义名称完全匹配的直接属性，而你的大部分列要么是嵌套属性，要么列定义名和数据源字段名不匹配，具体分析和解决办法如下：

问题诊断 #

1. 列定义名与数据源字段不匹配
   比如communeIdentique这个列，你的matColumnDef定义的是communeIdentique，但数据源里对应的字段是communesIdentiques（注意末尾的复数s），MatSort找不到对应字段，自然无法触发排序。

2. 嵌套属性无法直接排序
   像disciplineCsd、disciplineCsr、etablissementCsd、etablissementCsr这些列，你在模板中绑定的是嵌套对象的属性（比如poste.disciplineCsd.nom），但MatSort默认只会尝试读取item.disciplineCsd这个对象本身，而不是它的nom属性，所以无法完成排序逻辑。

具体解决方案 #

1. 修正列定义与数据源字段的匹配问题 #

把communeIdentique相关的定义改成和数据源字段一致的communesIdentiques：

• 在csr.component.ts中更新displayedColumns：

displayedColumns = [
  'disciplineCsd',
  'disciplineCsr',
  'multiple',
  'communesIdentiques', // 修改为和数据源字段一致的名称
  'etablissementCsd',
  'etablissementCsr',
  'occupation'
];

• 在csr.component.html中更新对应的列定义：

<ng-container matColumnDef="communesIdentiques">
  <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col">Même commune</th>
  <td mat-cell *matCellDef="let poste">
    <ng-container *ngIf="poste.communesIdentiques; else communesDifferentes">
      Mêmes communes
    </ng-container>
    <ng-template #communesDifferentes>
      Communes différentes
    </ng-template>
  </td>
</ng-container>

2. 为嵌套属性自定义排序访问器 #

在csr.component.ts的ngAfterViewInit方法中添加自定义的sortingDataAccessor，告诉MatSort如何提取嵌套属性的值：

ngAfterViewInit(): void {
  this.postes.sort = this.sort;
  // 自定义排序数据访问器，处理嵌套属性
  this.postes.sortingDataAccessor = (item, property) => {
    switch(property) {
      // 处理嵌套对象的属性提取
      case 'disciplineCsd': return item.disciplineCsd?.nom;
      case 'disciplineCsr': return item.disciplineCsr?.nom;
      case 'etablissementCsd': return item.etablissementCsd?.nom;
      case 'etablissementCsr': return item.etablissementCsr?.nom;
      // 布尔值列转成字符串，让排序更贴合显示顺序
      case 'multiple': return item.multiple ? '1' : '0';
      case 'communesIdentiques': return item.communesIdentiques ? '1' : '0';
      case 'occupation': return item.occupation ? '1' : '0';
      // 其他直接属性保持默认逻辑
      default: return item[property];
    }
  };
}

3. 验证效果 #

完成上述修改后，所有列的排序箭头点击后应该都能正常触发排序逻辑了：嵌套属性列会按照对应的nom字段值排序，布尔值列会按照你显示的文本顺序（比如"Occupé"在前，"Vacant"在后）排列。

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