如何让Angular Material表格默认按日期降序排序？

首先你代码里存在几个基础错误，这些会导致排序功能异常，先修正这些问题：

1. 修正模板中的列定义错误 #

• 两个列的matColumnDef不能重复，Date列的matColumnDef要改成"date"
• mat-header-cell应该用<th>标签，mat-cell用<td>标签，而非<tr>
• 必须添加表头行和数据行的定义，否则表格无法正确渲染

修正后的模板代码：

<table mat-table [dataSource]="tableData" matSort 
       matSortActive="date" matSortDirection="desc" 
       (sortChange)="sortTable($event)" multiTemplateDataRows>
  <!-- Name列 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let tdata"> {{tdata.name}} </td>
  </ng-container>

  <!-- Date列 -->
  <ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
    <td mat-cell *matCellDef="let tdata"> {{tdata.date}} </td>
  </ng-container>

  <!-- 表头行 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <!-- 数据行 -->
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

2. 组件中配置默认排序逻辑 #

仅在模板添加matSortDirection和matSortActive还不够，需要在组件中主动触发排序，确保表格加载时应用默认规则：

import { Component, ViewChild, OnInit } from '@angular/core';
import { MatSort, Sort } from '@angular/material/sort';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  @ViewChild(MatSort) sort!: MatSort;
  tableData: any[] = []; // 替换成你的实际数据
  displayedColumns: string[] = ['name', 'date']; // 对应模板中的matColumnDef值

  ngOnInit(): void {
    // 初始化数据后，设置默认排序并触发排序事件
    this.sort.active = 'date';
    this.sort.direction = 'desc';
    this.sort.sortChange.emit({active: 'date', direction: 'desc'} as Sort);
  }

  sortTable(event: Sort) {
    // 根据排序规则处理数据
    this.tableData.sort((a, b) => {
      const isAsc = event.direction === 'asc';
      switch (event.active) {
        case 'name':
          return compare(a.name, b.name, isAsc);
        case 'date':
          return compare(new Date(a.date), new Date(b.date), isAsc);
        default:
          return 0;
      }
    });
  }
}

// 辅助排序函数
function compare(a: any, b: any, isAsc: boolean) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

关键说明 #

• matSortActive="date"指定默认排序的列是Date列，配合matSortDirection="desc"设置降序
• 通过ViewChild获取MatSort实例后，在ngOnInit中主动触发sortChange事件，确保表格加载时立即应用排序规则
• 排序函数中对日期类型做了转换，确保日期比较的准确性

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