web-dev-qa-db-ja.com

mat-sort-headerで日付文字列でソートするにはどうすればよいですか？

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([]);
angulartypescriptangular-material
11
Pavel

解決策は次のとおりです。-DateDataオブジェクトが正しくソートされるように、sortingDataAccessor関数にDateオブジェクトを渡します。

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

MatTableDataSourceには、必要に応じてカスタマイズできるsortingDataAccessorがあります。

23
Sagar Kharche

私はSagar Kharcheの回答を拡大しています。 MatTableDataSourceでsortDataAccessorをオーバーライドする必要があります。

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

「item」は「dataSource：MatTableDataSource <ObjectName>」のオブジェクトObjectNameです

'property'は、入ってくる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列の下のすべてのオブジェクトが1つずつ「item」値に渡され、一方、matColumnDef = "startDate"の「startDate」はsortDataAccessor関数の「プロパティ」値。

したがって、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];
  }
};
5
Braden Brown

はい、できます。

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

任意の型の配列を使用するのではなく、テーブルに型を使用することを常にお勧めします。インターフェースを同じように定義できます。

それが役に立てば幸い。 :)

3
Akanksha Gaur