сортировать таблицу матов при выборе из выпадающего списка

Question

как сортировать таблицу матов при выборе значения из раскрывающегося списка: у меня есть таблица, содержащая столбец «состояние, дата», и раскрывающийся список, содержащий все имена столбцов. Я хочу отсортировать таблицу по значениям, которые содержат имена столбцов

Answer 1

Вы можете использовать Заголовок MatSort из таблицы материалов Angulars и генерировать событие sortChange .

Эти заголовки должны содержаться в родительском элементе с директива matSort, которая генерирует событие matSortChange, когда пользователь запускает сортировку заголовка.

Например:

export class TableSortingExample implements OnInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  @ViewChild(MatSort) sort: MatSort;

  selectedColumn = 'name';

  ngOnInit() {
    this.dataSource.sort = this.sort;
    this.changeSortedColumn();
  }

  changeSortedColumn() {
    const sortState: Sort = {active: this.selectedColumn, direction: 'asc'};
    this.sort.active = sortState.active;
    this.sort.direction = sortState.direction;
    this.sort.sortChange.emit(sortState);    
  }

Вместе с таблицей материалов и блоком выбора:

 <mat-select  [(value)]="selectedColumn" (selectionChange)="changeSortedColumn()">

Вот рабочая зависимость Stackblitz .