Angular Material中的默认排序 - 排序标题

Question

如何更改下面的Angular Material代码,以便数据表按'name'列排序,默认按升序排序.必须显示箭头(表示当前排序方向).

这就是我想要实现的目标:

原始代码:

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Dessert (100g)</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat (g)</th>
    <th mat-sort-header="carbs">Carbs (g)</th>
    <th mat-sort-header="protein">Protein (g)</th>
  </tr>

  <tr *ngFor="let dessert of sortedData">
    <td>{{dessert.name}}</td>
    <td>{{dessert.calories}}</td>
    <td>{{dessert.fat}}</td>
    <td>{{dessert.carbs}}</td>
    <td>{{dessert.protein}}</td>
  </tr>
</table>

我正在尝试这样的东西,但它不起作用(没有箭头显示,没有排序)

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear>

这是Plunker的链接

Answer 1

你错matSortStart了matSortDirection.

试试这个:

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc" matSortDisableClear>

https://plnkr.co/edit/sg0hC5d8LTjLKhbH9Eug?p=preview

matSortStart 可用于反转排序时使用的循环(例如,当用户点击进行排序时,它从desc而不是asc开始).

Answer 2

您可以通过调用sort(Sortable)数据源的方法以编程方式对表进行排序.假设您有dataSource数据源的组件属性:

// to put next to the class fields of the component
@ViewChild(MatSort) sort: MatSort

// to put where you want the sort to be programmatically triggered, for example inside ngOnInit
this.sort.sort(({ id: 'name', start: 'asc'}) as MatSortable);
this.dataSource.sort = this.sort;

Answer 3

@ViewChild(MatSort) sort: MatSort;

this.dataSource.sort = this.sort;

const sortState: Sort = {active: 'name', direction: 'desc'};
this.sort.active = sortState.active;
this.sort.direction = sortState.direction;
this.sort.sortChange.emit(sortState);

应该管用。演示

并显示排序方向箭头，请添加下一个CSS（解决方法）

th.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

Answer 4

材质更新（使用 v7.3 测试）：

@ViewChild(MatSort) matSort: MatSort;

private someMethod(): void {
  this.matSort.sort({ id: 'columnName', start: 'asc', disableClear: false });
}

这也将在mat-sort-header没有任何解决方法的情况下更新's 箭头

Answer 5

您也可以将 mat-table 排序属性绑定到您的组件变量。

正如@Andrew Seguin 所说：

<table matSort matSortActive="name" matSortDirection="asc">

如果您知道哪个是默认排序，这是设置默认排序的正确方法。

如果您从其他地方进行排序（在我的情况下来自查询字符串参数），您也可以这样做（排序箭头在这里完美工作）：

sortDirection: 'name',  // this can be changed or filled in any time
sortProperty: 'asc',


<mat-table matSort [matSortActive]="sortProperty" [matSortDirection]="sortDirection">

Answer 6

有几个因素会影响这种行为。主要是使用MatTableDataSource与DataSource的手工衍生品。因此，不同的解决方案可能在某些情况下有效，但在其他情况下则无效。

不管怎样，这是一个老错误，在 GitHub 上已经被很好地覆盖了。请对该 GitHub 问题点赞，以引起 Angular 团队的关注。

该 GitHub 线程（链接）上发布的最持久的解决方案是调用以下方法来应用排序顺序：

public setSort(id: string, start?: 'asc' | 'desc') {
    start = start || 'asc';
    const matSort = this.dataSource.sort;
    const toState = 'active';
    const disableClear = false;

    //reset state so that start is the first sort direction that you will see
    matSort.sort({ id: null, start, disableClear });
    matSort.sort({ id, start, disableClear });

    //ugly hack
    (matSort.sortables.get(id) as MatSortHeader)._setAnimationTransitionState({ toState });
}