Как отсортировать даты в таблице угловых 7 данных материала?

Question

Я создал таблицу данных с помощью ng generate @ angular / material: table demoTable.

Мне нужно отсортировать по столбцу даты.В предыдущих версиях Angular я мог использовать sortingDataAccessor для этой цели, но по некоторым причинам я не могу использовать это здесь.

Кто-нибудь пробовал использовать Angular 7 (более конкретно, после использования ng generate команда для создания DataTable)?

Answer 1

Вы можете выполнить сортировку с использованием 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;
  }

это должно работать для всех типов столбцов.

Answer 2

Выполните следующие действия, и вы сможете отсортировать столбец даты:

HTML :

1. Добавить MatSortModule

   import {MatSortModule} from '@angular/material/sort';
   
   imports: [
     ...
     MatSortModule
     ...
   

2. Добавьте matSort в вашу таблицу

   <table matSort ...
   

3. Добавьте mat-sort-заголовок для вашего столбца th

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

Более подробно это можно увидеть в Документах по угловым материалам

Кроме того, создал это DEMO для вас на случай, если вы запутались с этим