Question

我有一个用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>

在TS方面：

sort: MatSort;
@ViewChild(MatSort)
set appBacon(sort : MatSort) {
    this.sort = sort;
    this.dataSource.sort = this.sort;
}
dataSource = new MatTableDataSource([]);

Answer 1

以下是解决方案： - 在sortingDataAccessor函数中传递Date对象，这将确保日期对象将被正确排序。

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

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

Answer 2

是的，你可以。

您需要为MatTableDataSource.sortData字段提供一个函数。

您可以找到签名和默认实现here

例如：

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});
}

始终建议对表使用类型，而不是使用任何类型的数组。您可以定义相同的界面。

希望它有所帮助。：）

Answer 3

我正在扩展Sagar Kharche的答案。您需要覆盖MatTableDataSource上的sortingDataAccessor。

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

'item'是'dataSource：MatTableDataSource '

中的对象ObjectName

“属性”是传入的matColumnDef =“ startDate”属性。

例如，您可能具有如下对象：

export interface IPersonInfo {
    name: string,
    position: string,
    startDate: string,
    salary: string
}

您的日期表元素如下所示：

<ng-container matColumnDef="startDate">
    <th mat-header-cell *matHeaderCellDef> Start Date </th>
    <td mat-cell *matCellDef="let element"> {{element.startDate}} </td>
</ng-container>

因此，当您单击标题以对“开始日期”进行排序时，startDate列下的所有对象都会被一一传递到“ item”值中，而matColumnDef =“ startDate”中的“ startDate”将被传递在sortingDataAccessor函数中作为“属性”值输入。

因此，通过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];
  }
};

如何使用mat-sort-header按日期字符串排序？

3 个答案: