Как отсортировать MatTableDataSource программно? - PullRequest
Новая
       45

Как отсортировать MatTableDataSource программно?

0 голосов
/ 04 марта 2019

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

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

<mat-card matSort *ngFor="let item of dataSource.filteredData">

Функция, которую я использую для попытки сортировки данных: 

sortDataSource(id: string, start: string){
  this.dataSource.sort.sort(<MatSortable>({id: id, start: start}));
}

, которая вызывается при нажатиина кнопку в мат-меню, например 

<mat-menu #sortMenu="matMenu" yPosition="below" [overlapTrigger]="false">
            <button mat-menu-item (click)="sortDataSource('createdDate', 'asc')"><span>Creation Date</span><mat-icon>arrow_upward</mat-icon></button>

Любая помощь по этому вопросу будет принята с благодарностью!

Ссылка на StackBlitz.

Редактировать: Добавление, где я присваиваю данные источнику данных таблицы, который поступает из наблюдаемого массива: 

this.data$.subscribe(data => {
      this.dataSource.data = data;
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
}

Редактировать 2: Исправлено исправление изображения ошибки путем добавления «matSort» к mat-card с использованием *ngFor для создания мобильной версии макета mat-table.

1 Ответ

0 голосов
/ 04 марта 2019

ОБНОВЛЕНИЕ

Команде Материалов уже сообщалось об ошибке на Github.com .Похоже, что в настоящее время это невозможно.Пожалуйста, используйте ручной подход или реализуйте свой собственный заголовок сортировки.

Попробуйте вручную отсортировать данные источника данных: 

sortDataSource(id: string, start: string) {
    this.dataSource.sort.sort(<MatSortable>({ id: id, start: start }));
    this.dataSource.data.sort((a: any, b: any) => {
        if (a.createdDate < b.createdDate) {
            return -1;
        } else if (a.createdDate > b.createdDate) {
            return 1;
        } else {
            return 0;
        }
    });
}

Вы можете легко сделать это более универсальным, используя id ипараметры запуска вашей функции.

...