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

无法使用日期字符串对物料表列进行排序

1 个答案: