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

Question

我正在使用anuglar材料表并使用matSort进行排序.但它没有记录日期/时间列.它将datetime列作为字符串.

如何在角度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 |
-------------------------------
...
..
..
--------------------------------

Answer 1

这是解决方案:

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

MatTableDataSource有sortedDataAccessor,我们可以根据需要自定义.

Answer 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 )