web-dev-qa-db-ja.com

angular 4マテリアルソートで日付/時刻列を並べ替える方法は？

angularマテリアルテーブルを使用しており、matSortを使用して並べ替えています。ただし、日付/時刻列は並べ替えません。日付時刻列の値を文字列として受け取ります。

angular 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 |
-------------------------------
...
..
..
--------------------------------
angularsortingtypescriptangular-material
9
Munna

これが解決策です：

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

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

13
Sagar Kharche

Angular Material 5の最新バージョンでは、このような「mat-sort-header」というプロパティだけを追加する必要があり、すでにソートされているはずです。また、DatePipeを追加して、その日付をフォーマットできるようにすることもできます。オブジェクト。

<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 | datex:'DD. MMM YYYY, HH:mm'}}
    </mat-cell>
  </ng-container>
</mat-table>

Andriyはすでにこのplnkrを支援していたと思います（ plnkr.co/edit/z1BmTxFWAEvWQuMIAXCv?p=preview ）

1
user5159921

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];
    }
  };
1
José Salina

材料表で日付を並べ替える最も簡単な方法は、sortingDateAccessorで日付をUnixタイムスタンプに変換することです。

this.dataSource.sortingDataAccessor = (item, property) => {
        switch (property) {
            case 'birthday':
                return new Date(item.birthday).getTime()

            default:
                return item[property]
        }
}
0
rschouwenaar

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);
});
}
0
Derek J.