Question

我使用ng generate @ angular / material：table demoTable创建了一个数据表。

我必须按日期列进行排序。在以前的Angular版本中，我可以使用sortingDataAccessor来实现此目的，但是由于某些原因，我在这里无法使用它。

是否有人尝试使用Angular 7（更具体地说，是在使用ng generate命令创建DataTable之后）？

Answer 1

执行此步骤，您应该可以对日期列进行排序：

HTML ：

添加 MatSortModule

import {MatSortModule} from '@angular/material/sort';

imports: [
  ...
  MatSortModule
  ...

将 matSort 添加到您的表中
```
<table matSort ...
```
在您的列中添加 mat-sort-header
```
<th mat-sort-header="date"
```

具有此列的列将发出 matSortChange 事件

注册 matSortChange 事件

<table matSort (matSortChange)="sortData($event)">

TS ：

按自己的方式执行sortData（），如下所示：

sortData(event) {
  this.(your-list) = this.(your-list).sort((a, b) => {
    return a.date > b.date ? 1 : -1;
  }
}

您可以在Angular Material Docs

中查看更多详细信息

此外，为您创建了这个DEMO，以防万一您搞砸了

Answer 2

您可以使用MatSort进行排序，如下所示：

import { MatSort, MatTableDataSource } from '@angular/material';

在您的html中：

 <mat-table #matSort="matSort" matSort>

在ts组件中

声明：

sortableList: MatSort;

@ViewChild('matSort') set yourDataSource(ms: MatSort) {

    this.sortStudentDetails = ms;
    yourDataSoruce = new MatTableDataSource(yourList);
    yourDataSoruce.sort = this.sortableList;
  }

这应该适用于所有列类型。

如何在Angular 7材料数据表中对日期进行排序？

2 个答案: