Как сделать мультисортировку по умолчанию?

Question

это мой текущий код:

displayedColumns: string[] = ['id', 'dataYear', 'dataMonth', 'population', 'sources', 'created_at', 'updated_at', 'actions'];

@ViewChild(MatSort) sort: MatSort;

ngOnInit() {

   this.sort.sort(<MatSortable>({id: 'updated_at', start: 'desc'}));
   this.listData.sort = this.sort;
}

Я могу сделать сортировку по умолчанию только для одного столбца.Что если я хотел бы сделать три столбца (dataYear, dataMonth, updated_at) сортировки?

Ниже содержимого находится компонент HTML:

<mat-table [dataSource]="listData" matSort>
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header class="hide"> Id. </mat-header-cell>
<mat-cell *matCellDef="let element" class="hide"> {{element.id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="dataYear">
<mat-header-cell *matHeaderCellDef mat-sort-header> Year </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.dataYear}} </mat-cell>
</ng-container>
<ng-container matColumnDef="dataMonth">
<mat-header-cell *matHeaderCellDef mat-sort-header> Month </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.dataMonth}} </mat-cell>
</ng-container>
<ng-container matColumnDef="population">
<mat-header-cell *matHeaderCellDef mat-sort-header> Population </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.population}} </mat-cell>
</ng-container>
<ng-container matColumnDef="sources">
<mat-header-cell *matHeaderCellDef mat-sort-header> Sources </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.sources}} </mat-cell>
</ng-container>
<ng-container matColumnDef="created_at">
<mat-header-cell *matHeaderCellDef mat-sort-header> Created Time </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.created_at}} </mat-cell>
</ng-container>
<ng-container matColumnDef="updated_at">
<mat-header-cell *matHeaderCellDef mat-sort-header> Updated Time </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.updated_at}} </mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let row">
<button mat-icon-button (click)="onEdit(row)"><mat-icon>launch</mat-icon></button>
<button mat-icon-button color="warn" (click)="onDelete(row.id)"><mat-icon>delete_outline</mat-icon></button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Answer 1

Используйте одну сортировку четыре раза, после чего получится то, что я хочу

Приоритет: update_at> dataYear> население> creation_at

this.sort.sort(<MatSortable>({id: 'created_at', start: 'desc'}));
this.sort.sort(<MatSortable>({id: 'population', start: 'desc'}));
this.sort.sort(<MatSortable>({id: 'dataYear', start: 'desc'}));
this.sort.sort(<MatSortable>({id: 'updated_at', start: 'desc'}));

Answer 2

Я не думаю, что это пока поддерживается, посмотрите эту проблему Github здесь .

Но вы могли бы просто отсортировать данные самостоятельно, вместо того чтобы полагаться на источник данных Материала, чтобы сделать это за вас, чего в любом случае сейчас не может быть (сортировка по нескольким полям).

Вот быстрый stackblitz , который я бросил вместе.

Он вообще не использует matSort и просто сортирует данные самого источника данных через массив Sortобъекты:

export interface Sort {
  id: string;
  direction: 'asc' | 'desc';
}

multiSort: Sort[] = [
  { id: 'position', direction: 'desc' },
  { id: 'weight', direction: 'asc' },
  { id: 'name', direction: 'asc' }
];

А затем функция, которая использует конфигурацию сортировки:

public sort() {
  if (!this.multiSort) {
    return;
  }

  let sortedData: PeriodicElement[];
  this.multiSort.forEach(sort => {
    sortedData = this.dataSource.data
    .sort((a, b) => {
      if (sort.direction === 'asc') {
        return a[sort.id] > b[sort.id] ? 1 : -1;
      } else if (sort.direction === 'desc') {
        return a[sort.id] > b[sort.id] ? -1: 1;
      } else {
        return 0;
      }
    });
  });
  this.dataSource.data = sortedData;
}

Это может быть не идеально, но в зависимости от ваших требований подобное решение может заставить вас решить эту проблему.