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

Posted 2021-04-13

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

任何帮助，将不胜感激。

答案

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

this.sort._stateChanges.next();

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

另一答案

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

当视图需要在不需要用户与视图交互的更改之后进行刷新时，这通常很有用。

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

constructor( private changeDetector: ChangeDetectorRef  ) { }

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

this.changeDetector.detectChanges();

希望能帮助到你 ;）

另一答案

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