切换数据源后Angular Material的MatSort排序功能失效问题

核心问题分析 #

你的代码里存在两个关键问题：

1. 直接使用this.data.sort()会原地修改原数组，且赋值给sortedData时数组引用未发生变化，Angular变更检测无法感知到数据更新，导致视图不刷新。
2. 如果模板中表格的数据源绑定的不是sortedData，而是原始的data或selectedHomeData，排序后的结果也不会展示。

修复步骤 #

1. 修改排序函数，避免原地修改原数组
   先通过扩展运算符或slice()复制原始数组，再对副本进行排序，确保sortedData是全新的数组引用：

   sortData(sort: Sort) {
     // 复制原始数组，不修改原数据
     const data = [...this.data];
     if (!sort.active || sort.direction === '') {
       this.sortedData = data;
       return;
     }
   
     this.sortedData = data.sort((a: any, b: any) => {
       const isAsc = sort.direction === 'asc';
       switch (sort.active) {
         case 'name':
           return this.compare(a.name, b.name, isAsc);
         case 'goals':
           return this.compare(a.stats.goals, b.stats.goals, isAsc);
         default:
           return 0;
       }
     });
   }
   

2. 确保compare函数逻辑正确
   确认你的compare函数能正确处理字符串和数字的排序：

   compare(a: number | string, b: number | string, isAsc: boolean) {
     // 数字直接比较，字符串转小写后统一规则比较
     if (typeof a === 'number' && typeof b === 'number') {
       return (a - b) * (isAsc ? 1 : -1);
     } else {
       const strA = String(a).toLowerCase();
       const strB = String(b).toLowerCase();
       return strA.localeCompare(strB) * (isAsc ? 1 : -1);
     }
   }
   

3. 检查模板绑定是否正确
   确保表格的数据源绑定到sortedData，且matSortChange事件正确关联到sortData函数：

   <table mat-table [dataSource]="sortedData" matSort (matSortChange)="sortData($event)">
     <!-- 列定义示例 -->
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>名称</th>
       <td mat-cell *matCellDef="let element">{{element.name}}</td>
     </ng-container>
   
     <ng-container matColumnDef="goals">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>进球数</th>
       <td mat-cell *matCellDef="let element">{{element.stats.goals}}</td>
     </ng-container>
   
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
   

4. 初始化sortedData
   在组件初始化或数据加载完成后，给sortedData赋初始值，确保初始状态有数据：

   ngOnInit() {
     // 假设this.data已加载完成
     this.sortedData = [...this.data];
   }
   

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