typescript 如何使用 mat-sort-header 按日期字符串排序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49603499/
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 sorting by date string with mat-sort-header?
提问by Pavel
I have a case table constructed with angular.materialand I need to add sorting by date. But my date is a stringtype, and so sorting incorrectly. How to overriding default mat-sort-headerbehavior. And it's possible?
我有一个案例表angular.material，我需要按日期添加排序。但是我的日期是一种string类型，所以排序不正确。如何覆盖默认mat-sort-header行为。这可能吗？
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource" matSort>
<!-- Reg Date Column -->
<ng-container matColumnDef="regDate">
<mat-header-cell *matHeaderCellDef mat-sort-header> Reg Date </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.regDate}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
And on TS side:
在 TS 方面：
sort: MatSort;
@ViewChild(MatSort)
set appBacon(sort : MatSort) {
this.sort = sort;
this.dataSource.sort = this.sort;
}
dataSource = new MatTableDataSource([]);
回答by Sagar Kharche
Here is the solution:- Pass Date object in sortingDataAccessor function which will make sure date objects will get sorted correctly.
这是解决方案：- 在 sortingDataAccessor 函数中传递日期对象，这将确保日期对象正确排序。
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'fromDate': return new Date(item.fromDate);
default: return item[property];
}
};
MatTableDataSource has sortingDataAccessor which we can customize as per our need.
MatTableDataSource 具有 sortDataAccessor，我们可以根据需要对其进行自定义。
回答by Braden Brown
I'm expanding on Sagar Kharche answer. You need to override the sortingDataAccessor on MatTableDataSource.
我正在扩展 Sagar Kharche 的答案。您需要覆盖 MatTableDataSource 上的 sortingDataAccessor。
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'fromDate': return new Date(item.fromDate);
default: return item[property];
}
};
'item' is the object ObjectName in 'dataSource: MatTableDataSource< ObjectName>'
'item' 是 'dataSource: MatTableDataSource< ObjectName>' 中的对象 ObjectName
'property' is the matColumnDef="startDate" attribute coming in.
'property' 是 matColumnDef="startDate" 属性。
So for example you might have an object as follows:
例如，您可能有一个对象，如下所示：
export interface IPersonInfo {
name: string,
position: string,
startDate: string,
salary: string
}
Your date table element would look like this:
您的日期表元素如下所示：
<ng-container matColumnDef="startDate">
<th mat-header-cell *matHeaderCellDef> Start Date </th>
<td mat-cell *matCellDef="let element"> {{element.startDate}} </td>
</ng-container>
So when you click on the header to sort 'Start Date', all the objects under the startDate column get passed in one by one into the 'item' value, while the 'startDate' in matColumnDef="startDate" is passed in as the 'property' value in the sortingDataAccessor function.
因此，当您单击标题对 'Start Date' 进行排序时，startDate 列下的所有对象都会被一一传递到 'item' 值中，而 matColumnDef="startDate" 中的 'startDate' 则作为sortedDataAccessor 函数中的“属性”值。
So with the sortingDataAccessor function you could override every single column.
因此，使用 sortingDataAccessor 函数，您可以覆盖每一列。
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'name': return item.name;
case 'position': return item.position;
case 'startDate': return item.startDate;
case 'salary': return item.salary;
default: return item[property];
}
};
回答by Akanksha Gaur
Yes, you can.
是的你可以。
You need to provide a a function to MatTableDataSource.sortDatafield.
您需要为MatTableDataSource.sortData字段提供一个函数。
You can find the signature and default implementation here
您可以在此处找到签名和默认实现
For e.g:
例如：
customSortData(data: T[], sort: MatSort): T[] {
// sort.active will tell you if sort is active and for which headerid
// sort.direction will tell u if sort is 'asc' or not
return data.sort((a, b) => {// Ur implementation});
}
It is always recommended to use a type for a table, rather than using array of any type. You can define your interface for the same.
始终建议对表使用类型，而不是使用任何类型的数组。您可以为此定义您的接口。
Hope it helps. :)
希望能帮助到你。:)
