如何基于uploadedOn时间戳对Angular Material表格进行排序？

你的配置不生效的核心原因是直接使用普通数组作为表格数据源，Angular Material的matSort需要配合MatTableDataSource才能实现排序功能。以下是完整的修复步骤：

1. 组件内改造数据源 #

在组件中引入MatTableDataSource和MatSort，将普通数组包装为MatTableDataSource实例，并关联排序控件：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';

// 定义你的数据类型
interface AvailItem {
  // 其他字段
  uploadedOn: Date; // 确保是Date类型，若后端返回字符串需先转换
}

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements AfterViewInit {
  inputAvailsList = new MatTableDataSource<AvailItem>([]);
  @ViewChild(MatSort) sort!: MatSort;

  // 数据加载逻辑
  loadData() {
    // 假设从接口获取原始数据
    const rawData = [/* 你的数据数组 */];
    // 若uploadedOn是字符串格式，转换为Date类型
    const formattedData = rawData.map(item => ({
      ...item,
      uploadedOn: new Date(item.uploadedOn)
    }));
    this.inputAvailsList.data = formattedData;

    // 自定义时间排序逻辑，用时间戳确保排序准确性
    this.inputAvailsList.sortingDataAccessor = (item, property) => {
      if (property === 'uploadedOn') {
        return item.uploadedOn.getTime();
      }
      return item[property as keyof AvailItem];
    };

    // 设置默认倒序排序
    this.inputAvailsList.sort.sort({
      id: 'uploadedOn',
      start: 'desc',
      disableClear: false
    });
  }

  ngAfterViewInit() {
    // 将排序控件绑定到数据源
    this.inputAvailsList.sort = this.sort;
  }
}

2. 模板代码调整 #

保留你的列定义，修改表格标签的数据源绑定，并指定默认排序方向为desc：

<div class="avails-set-table" *ngIf="availSetsLoaded">
  <table mat-table [dataSource]="inputAvailsList" multiTemplateDataRows matSort matSortActive="uploadedOn" matSortDirection="desc">
    <!-- uploadedOn列定义 -->
    <ng-container matColumnDef="uploadedOn">
      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by request timestamp">Uploaded On</th>
      <td mat-cell *matCellDef="let element">{{ element.uploadedOn | date:'MM/dd/YYYY, hh:mm:ss aa'}}</td>
    </ng-container>

    <!-- 其他列定义 -->
    <!-- ... -->

    <!-- 行结构定义 -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

关键注意点 #

• 确保uploadedOn是可排序的Date类型：如果后端返回的是字符串格式时间（如ISO字符串），必须先转换为Date，否则排序会按字符串字典序而非时间顺序执行。
• ngAfterViewInit中必须完成MatSort与数据源的绑定，否则排序控件无法触发数据排序。

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