typescript 如何在角度 4 材料排序中对日期/时间列进行排序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47506984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to sort Date/Time column in angular 4 material sort?
提问by Munna
I'm using angular material table and using matSort for sorting. But it's not sorting the dates/time column. It takes the datetime column values as strings.
我正在使用有角度的材料表并使用 matSort 进行排序。但它不是对日期/时间列进行排序。它将日期时间列值作为字符串。
How to sort date/time column in angular 4 material ?
如何在 angular 4 材料中对日期/时间列进行排序？
My json will look like this
我的 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"
}
my table look like this
我的桌子看起来像这样
-------------------------------
name | version | status | date |
-------------------------------
...
..
..
--------------------------------
回答by Sagar Kharche
Here is solution:
这是解决方案：
this.dataSource.sortingDataAccessor = (item, property): string | number => {
switch (property) {
case 'fromDate': return new Date(item.fromDate).toNumber();
default: return item[property];
}
};
MatTableDataSource has sortingDataAccessor which we can customize as per our need.
MatTableDataSource 具有 sortDataAccessor，我们可以根据需要对其进行自定义。
回答by Munna
With the latest version of Angular Material 5, you should add just a property "mat-sort-header" and it will sort out of the box. Also, you could add some DatePipe so you can format that Date object.
使用最新版本的 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>
I also think Andriy has already helped with this plnkr (plnkr.co/edit/z1BmTxFWAEvWQuMIAXCv?p=preview)
我也认为 Andriy 已经帮助了这个 plnkr ( plnkr.co/edit/z1BmTxFWAEvWQuMIAXCv?p=preview)
回答by José Salina
In addition to the Sagar Kharche's post, if your date is from firebase, I recommended you to do this:
除了 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];
}
};
回答by rschouwenaar
The easiest way to sort on a date in the Material Table is converting your date to a Unix timestamp in the sortingDateAccessor.
在材料表中按日期排序的最简单方法是将日期转换为sortingDateAccessor.
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'birthday':
return new Date(item.birthday).getTime()
default:
return item[property]
}
}
回答by Derek J.
Expanding on Sagar Kharche's answer, if you are using the sorting function from the material documentation and using moment.js for your dates, this way will work as well.
扩展 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);
});
}
