無法使用日期字符串對物料表列進行排序

Question

所以在角度我有一個帶有列的材質​​表。 我正在使用matSort對我的表asc / desc中的3列進行排序。 我可以對最后2列asc / desc進行排序。 但是，我不能對日期列（第一列）做同樣的事情。 似乎我可以對其進行一次排序，但是每當我嘗試再次對其進行排序時，它什么都不做。

我嘗試覆蓋MatTableDataSource上的sortingDataAccessor，但它不起作用：

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

這是我的trips.component.html文件中帶有日期（日期列）的物料表的開始：

<div class="table-responsive">
<table class="table table-bordered">
  <mat-table [dataSource]="dataSource" matSort>

    <!-- Day column -->
  <ng-container matColumnDef="day">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Day</mat-header-cell> 
    <mat-cell *matCellDef="let trip">{{ trip.start | date: 'dd/MM/yyyy' }}</mat-cell>
  </ng-container>

這是我的trips.component.ts文件：

import { Component, OnInit, ViewChild } from '@angular/core';
import { Trip } from 'src/app/models/Trip';
import { MatSort, MatSortable, MatTableDataSource } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';

@Component({
  selector: 'app-trips',
  templateUrl: './trips.component.html',
  styleUrls: ['./trips.component.css']
})
export class TripsComponent implements OnInit {

@ViewChild(MatSort, {static:false}) sort: MatSort;

private trips: Trip[];
displayedColumns = ['day', 'time', 'duration', 'from', 'to', 'mileage', 'cost'];
dataSource;

constructor() {
  this.trips = [new Trip("12/11/2019 02:30:15", "12/11/2019 06:04:43", "Landsmeer", "Amsterdam-West", 1.97, 1.06), new Trip("0  8/29/2019 16:10:14", "08/29/2019 18:19:54", "Amsterdam-West", "Vlaggemast", 14.74, 9.20),new Trip("08/16/2019 01:56:42", "08/16/2019 03:23:26", "Amsterdam-Zuid", "Amsterdam-Noord", 7.88, 7.61), new Trip("03/25/2019 04:01:27", "03/25/2019 09:58:27", "NDSM-Plein", "Amsterdam-Zuid", 5.49, 5.01), new Trip("12/23/2018 14:27:06", "12/23/2018 18:47:34", "Westpoort", "Schakelstraat", 2.00, 1.98), new Trip("12/10/2018 12:26:56", "12/23/2018 14:39:29", "Ijdok", "Amsterdam-Oost", 3.46, 2.47), new Trip("07/03/2018 11:20:39", "03/07/2018 12:37:51", "Amsterdam-Noord", "Huidekoperstraat", 7.66, 5.22), new Trip("05/19/2018 22:41:39", "05/20/2018 03:29:20", "Amsterdam Nieuw-West", "Amsterdam-Centrum", 13.32, 6.93), new Trip("04/21/2018 08:37:04", "04/21/2018 15:24:38", "Buiksloterweg", "Amsterdam-Noord", 13.72, 13.13)
   ]
  }

  //Create this method (ngAfterViewInit) because we want to access @viewChield
  ngAfterViewInit(){
    this.dataSource.sortingDataAccessor = (item, property) => {
      switch (property) {
        case 'day': return new Date(item.day);
        default: return item[property];
      }
    };
    this.dataSource.sort = this.sort;
  }

  ngOnInit() {

    //Fill datasource with the trips array
    this.dataSource = new MatTableDataSource(this.trips);

}

}

任何幫助都值得贊賞

Answer 1

您可能需要設置排序屬性。 像下面這樣在根級別嘗試。 此時請勿在任何方法中粘貼代碼。 將其設置在組件內部。

  private sort: MatSort;
  // Required for sorting on Mat tables.
  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.dataSource.sort = this.sort;
    this.dataSource.sortingDataAccessor = (data, header) => {
      switch (header) {
        case 'day': return new Date(data.day);
        default: return data[header];
      }
    };
  }