如何在角度 4 材料排序中对日期/时间列进行排序？

Posted 2023-03-13

【中文标题】如何在角度 4 材料排序中对日期/时间列进行排序？

【英文标题】：How to sort Date/Time column in angular 4 material sort?

【发布时间】：2018-05-10 11:00:26

【问题描述】：

我正在使用角度材料表并使用 matSort 进行排序。但它不是对日期/时间列进行排序。它将日期时间列值作为字符串。

如何对 Angular 4 材料中的日期/时间列进行排序？

我的 json 看起来像这样

 
        "name": "Rule Test 5",
        "time": "2017-11-17T08:34:32",
        "version": 1,
        "status": "SAVED"
    , 
        "name": "Availability Adjustment",
        "time": "2017-11-17T10:13:27",
        "version": 1,
        "status": "SAVED"
    , 
        "name": "Class suppression",
        "time": "2017-11-17T11:18:44",
        "version": 1,
        "status": "SAVED"
    

我的桌子是这样的

-------------------------------
name | version | status | date |
-------------------------------
...
..
..
--------------------------------

【问题讨论】：

请在此 pluner (plnkr.co/edit/z1BmTxFWAEvWQuMIAXCv?p=preview) 上复制并解释您的问题，我会尽力提供帮助

【参考方案1】：

这里是解决方案：

this.dataSource.sortingDataAccessor = (item, property): string | number => 
  switch (property) 
    case 'fromDate': return new Date(item.fromDate).toNumber();
    default: return item[property];
  
;

MatTableDataSource 有sortingDataAccessor，我们可以根据需要自定义。

【参考方案2】：

使用最新版本的 Angular Material 5，您应该只添加一个属性“mat-sort-header”，它就会开箱即用。此外，您可以添加一些 DatePipe 以便格式化该 Date 对象。

<mat-table>
  <ng-container matColumnDef="fromDate">
    <mat-header-cell *matHeaderCellDef mat-sort-header> 
       <span translate>date</span>
    </mat-header-cell>
    <mat-cell *matCellDef="let row"> 
       row.fromDate | date: 'dd MMM., yyyy, HH:mm' 
    </mat-cell>
  </ng-container>
</mat-table>

我也认为 Andriy 已经帮助了这个 plnkr (plnkr.co/edit/z1BmTxFWAEvWQuMIAXCv?p=preview)

【参考方案3】：

除了 Sagar Kharche 的帖子，如果您的日期来自 firebase，我建议您这样做：

this.dataSource.sortingDataAccessor = (item, property) => 
    console.log(item)
    switch (property) 
      case 'fromDate': 
        return new Date(item.fromDate.seconds * 1000);
      
      default: return item[property];
    
  ;

【参考方案4】：

扩展 Sagar Kharche 的回答，如果您使用材料文档中的排序功能并使用 moment.js 作为日期，这种方式也可以。

sortData(data: Job[]): Job[] 
if (!this.sort.active || this.sort.direction === '')  return data; 

return data.sort((a, b) => 
  let propertyA: number | Date | string = '';
  let propertyB: number | Date | string = '';

  switch (this.jobSort.active) 
    case 'status': [propertyA, propertyB] = [a.status, b.status]; break;
    case 'type': [propertyA, propertyB] = [a.type, b.type]; break;
    case 'time': [propertyA, propertyB] = [new Date(moment(a.time, 'MMM Do LT').toDate()),
    new Date(moment(b.time, 'MMM Do LT').toDate())]; break;
  

  const valueA = isNaN(+propertyA) ? propertyA : +propertyA;
  const valueB = isNaN(+propertyB) ? propertyB : +propertyB;

  return (valueA < valueB ? -1 : 1) * (this.jobSort.direction === 'asc' ? 1 : -1);
);

【参考方案5】：

在材料表中按日期排序的最简单方法是将日期转换为 sortingDateAccessor 中的 Unix 时间戳。

this.dataSource.sortingDataAccessor = (item, property) => 
        switch (property) 
            case 'birthday':
                return new Date(item.birthday).getTime()

            default:
                return item[property]