Angular - сортировка таблицы материалов не работает должным образом

Question

Я создаю таблицу, которая должна сортировать по имени файла и дате. Я следовал документации Angular Material для этой цели, но не работает, она не показывает никаких ошибок в компиляторе или консоли браузера, таблица выглядит так это:

<mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="File">
        <mat-header-cell *matHeaderCellDef mat-sort-header> File </mat-header-cell>
        <mat-cell  *matCellDef="let element" data-label="File"> {{element.fileName}} </mat-cell>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="Date">
        <mat-header-cell  *matHeaderCellDef mat-sort-header>Date </mat-header-cell>
        <mat-cell  *matCellDef="let element" data-label="Date"> {{element.date}} </mat-cell>
      </ng-container>
      <!-- Weight Column -->
      <ng-container matColumnDef="Extension">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Extension</mat-header-cell>
        <mat-cell  *matCellDef="let element" data-label="Extension"> {{element.extension}} </mat-cell>
      </ng-container>



      <ng-container matColumnDef="View">
        <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
        <mat-cell  *matCellDef="let element" data-label="View"> <a href="{{element.url}}" target="_blank" class="green-text"><i class="material-icons">visibility</i></a></mat-cell>
      </ng-container>

      <ng-container matColumnDef="Delete">
        <mat-header-cell *matHeaderCellDef> Delete </mat-header-cell>
        <mat-cell  *matCellDef="let element" data-label="Delete"> <a class="red-text"><i class="material-icons">delete_forever</i></a></mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

и это мой код ts

export class FilesComponent implements OnInit {
  displayedColumns: string[] = ['File', 'Extension', 'Date', 'View', 'Delete'];
  dataSource = new MatTableDataSource<Files>(ELEMENT_DATA);
  data = ELEMENT_DATA;
  selects: any;
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;
  constructor(private addFile: MatDialog) {
  }

  ngOnInit(): void {
    this.Materialize();
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  Materialize() {
    this.selects = document.querySelectorAll('select');
    M.FormSelect.init(this.selects);
  }

  changeFiles(value) {
    console.log('option:', value);
    switch (parseInt(value)) {
      case 1:
        this.dataSource = new MatTableDataSource<Files>(ELEMENT_DATA);
        break;
      case 2:
        this.dataSource = new MatTableDataSource<Files>(Charts);
        break;
      case 3:
        this.dataSource = new MatTableDataSource<Files>(Documents);
        break;
      default:
        this.dataSource = new MatTableDataSource<Files>(ELEMENT_DATA);
        break;
    }
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }
}

событие, заголовок сортировки, к которому он применяется, и стили (стрелки для сортировки) появляются в таблице, данные не отображаются сортировать.

Answer 1

@ user12129132 ответ будет работать для нормальной сортировки (необходимо изменить значения полей в источнике данных, чтобы они соответствовали значениям полей в определениях столбцов, а также использовать то же самое в определении matColumn), но у вас есть имя файла с числами в нем, это не будет сортироваться должным образом. Для этой цели мы можем использовать sortingDataAccessor.

См. рабочую версию здесь - Stackblitz: https://stackblitz.com/edit/angular-g4svyj

  ngAfterViewInit() {    
  this.dataSource.sort = this.sort;
  this.dataSource.sortingDataAccessor = (data, attribute) => {
    let formattedData=data[attribute]
    if(attribute=="fileName")
    {  
       formattedData=parseInt(formattedData.match(/(\d)*$/)[0]);
    }
    return formattedData;
  };
   this.dataSource.paginator = this.paginator; 
  }

Answer 2

имя matColumnDef и имя фактического значения * matCellDef должны совпадать

В компоненте. html

Изменить

<ng-container matColumnDef="File"> <mat-header-cell *matHeaderCellDef mat-sort-header> File </mat-header-cell> <mat-cell *matCellDef="let element" data-label="File"> {{element.fileName}} </mat-cell></ng-container>

до

<ng-container matColumnDef="fileName"> <mat-header-cell *matHeaderCellDef mat-sort-header> File </mat-header-cell> <mat-cell *matCellDef="let element" data-label="File"> {{element.fileName}} </mat-cell> </ng-container>

В тс:

изменить

displayedColumns: string[] = ['File', 'Extension', 'Date', 'View', 'Delete'];

на

displayedColumns: string[] = ['fileName', 'Extension', 'Date', 'View', 'Delete'];