Mat-table 将 mat-sort 重置为初始状态

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 中删除排序箭头。希望这会有所帮助！