Мат-таблица сброса mat-sort в исходное состояние - PullRequest
Новая
       22

Мат-таблица сброса mat-sort в исходное состояние

0 голосов
/ 30 апреля 2018

У меня есть таблица матов, в которой есть несколько сортируемых столбцов. Я могу установить начальную сортировку таблицы с помощью свойств matSortActive и matSortDirection для таблицы mat. При этом стрелка, указывающая направление сортировки в заголовках, отображается правильно.

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

Моя таблица и кнопка сброса в HTML: 

<button mat-button mat-raised-button (click)="removeFilters()" class="reset-button">Verwijder filters</button>

<mat-table #table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)" matSortActive="comp_name_sort" matSortDirection="asc">
  <ng-container matColumnDef="assetName">
    <mat-header-cell *matHeaderCellDef mat-sort-header="comp_name_sort">Systeem</mat-header-cell>
    <mat-cell *matCellDef="let asset"> {{asset.comp_name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="softwareName">
    <mat-header-cell *matHeaderCellDef mat-sort-header="soft_name_sort">Software</mat-header-cell>
    <mat-cell *matCellDef="let asset"> {{asset.soft_name}} </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 AssetsComponent implements OnInit {

  @ViewChild(MatSort) sort: MatSort;

  assets: Asset[];
  displayedColumns = ['assetName', 'softwareName',];
  dataSource = new MatTableDataSource<Asset>(this.assets);

  constructor( private assetsService: AssetsService) { }

  ngOnInit() {
    this.getAssets();
  }

  getAssets(): void {
    this.assetsService.getAssets().subscribe(
      assets => {
        this.assets = assets;
        this.dataSource = new MatTableDataSource<Asset>(this.assets);
      }
    );
  }

  sortData(event): void {
    this.assetsQueryService.setSorts(event);
    this.getAssets();
  }

  removeFilters() {
    this.sort.active = 'comp_name_sort';
    this.sort.direction = 'asc';
    this.sort.sortChange.emit({active: 'comp_name_sort', direction: 'asc'});
    this.assetsQueryService.removeFilters();
    this.getAssets();
  }

}

Столбец и направление сортировки передаются в assetsService, поскольку сортировка выполняется в бэкэнде (из-за разбивки на страницы на стороне сервера, здесь не показанной). Это все работает хорошо, также с кнопкой сброса. Единственная проблема - отображаемая стрелка. Итак, в заключение, как мне программно сбросить стрелку сортировки, отображаемую в таблице, в исходное состояние?

Любая помощь будет оценена.

Ответы [ 4 ]

0 голосов
/ 24 мая 2019

Я знаю, что этот вопрос старый, но на тот случай, если кто-нибудь еще посмотрит ...

Чтобы установить стрелку в заголовке сортировки, у меня это сработало: 

import { MatSort } from '@angular/material/sort'

Затем в классе: 

@ViewChild(MatSort) myMatSort:MatSort

Наконец, вы можете сделать это: 

myMatSort.sort({
  id: 'column-name', // The column name specified for matColumnDef attribute
  start: 'asc', // Can be 'asc', 'desc' or null,
  disableClear: false
})

См. Метод sort и MatSortable интерфейс здесь .

0 голосов
/ 28 января 2019

Может быть, вам следует попробовать ChangeDetectorRef , может быть, после изменения представление не обновляется должным образом.

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

Просто добавьте детектор изменений в ваш компонент следующим образом: 

constructor( private changeDetector: ChangeDetectorRef  ) { }

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

this.changeDetector.detectChanges();

Надеюсь, это поможет;)

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

Использование Angular 6+,

если вы хотите сбросить сортировку DESCENDING:

defaultSortStart: 'desc', defaultSortDirection: 'asc'

если вы хотите сбросить сортировку ASCENDING:

defaultSortStart: 'asc', defaultSortDirection: 'desc' 



    // Reset sort: FIELD_NAME/DESC.
    let defaultSortStart: ('asc' | 'desc') = 'desc';
    let defaultSortDirection: ('asc' | 'desc') = 'asc';
    let defaultSortField = this.matListColumnName.FIELD_NAME;
    this.sort.direction = defaultSortDirection;
    this.sort.sort({
        id: defaultSortField,
        start: defaultSortStart,
        disableClear: true
    });

    // Reset sort: FIELD_NAME/ASC.
    let defaultSortStart: ('asc' | 'desc') = 'asc';
    let defaultSortDirection: ('asc' | 'desc') = 'desc';
    let defaultSortField = this.matListColumnName.FIELD_NAME;
    this.sort.direction = defaultSortDirection;
    this.sort.sort({
        id: defaultSortField,
        start: defaultSortStart,
        disableClear: true
    });
0 голосов
/ 15 мая 2018

Я не знаю, нужна ли вам помощь в этом, но я столкнулся с той же проблемой, и вот мое решение. После сброса активного и направления для вашего вида добавьте следующую строку: 

this.sort._stateChanges.next();

Это должно удалить стрелку сортировки из вашего пользовательского интерфейса. Надеюсь, это поможет!

...