Question

我有一个mat-table，其中有几个可排序的列。我可以在mat-table上使用matSortActive和matSortDirection属性设置表的初始排序。使用此选项，可正确显示指示标题中排序方向的箭头。

现在，当我尝试使用按钮将排序重置为初始状态时，排序已正确重置。但是，标题中的箭头不会更新。因此，箭头仍显示在上一个已排序列的标题中。如何让箭头再次显示在初始状态？

我在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，因为排序是在后端完成的（因为服务器端分页，此处未显示）。这一切都运行良好，也可以使用重置按钮。唯一的问题是显示的箭头。总而言之，如何以编程方式将表格中显示的排序箭头重置为初始状态？

任何帮助将不胜感激。

Answer 1

对于寻求此特定问题答案的其他任何人。正如ericbea在评论中指出的那样，Angular意识到了这个问题，并且在github上仍存在一个关于此的问题：https://github.com/angular/components/issues/10242。我发现对我有用的唯一解决方法也列在其中。就像这样：

this.sort.sort({ id: null, start: 'desc', disableClear: false });
this.sort.sort({ id: 'comp_name_sort', start: 'asc', disableClear: false });
(this.sort.sortables.get('comp_name_sort') as MatSortHeader)._setAnimationTransitionState({ toState: 'active' });

如果要排序的列当前为活动列，则第一行用于清除排序。

Answer 2

我不知道你是否仍然需要帮助，但我遇到了同样的问题，这是我的解决方案。重置排序的活动和方向后，添加以下行：

this.sort._stateChanges.next();

这应该从您的UI中删除排序箭头。希望这有帮助！

Answer 3

也许您应该尝试ChangeDetectorRef，可能只是因为更改后视图没有正确刷新。

这通常在视图更改后不需要用户与视图交互时需要刷新时非常有用。

只需将变更检测器注入组件中，如下所示：

constructor( private changeDetector: ChangeDetectorRef  ) { }

，然后在以编程方式重置排序状态后立即使用它，以强制视图检测如下更改：

this.changeDetector.detectChanges();

希望它会有所帮助;）

Answer 4

使用Angular 6+，

如果您想按排序重设DESCENDING：


defaultSortStart：'desc'，defaultSortDirection：'asc'


如果要排序重置升序：


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
    });

Answer 5

我知道这个问题很旧，但是万一有人来找...

要在排序标题中设置箭头，这对我有用：

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接口here。

mat-table重置mat-sort到初始状态

5 个答案: