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


85

如何更改下面的“角度材料”代码,以便数据表按“名称”列排序,默认情况下按升序排序。必须显示箭头(指示当前分类方向)。

这是我要实现的目标:

在此处输入图片说明

原始代码:

<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的链接


可以调用this.sortData({active: "name", direction: "asc"})ngOnInit检查plunker
潘卡Parkar

1
@PankajParkar这不是正确的解决方案。表已排序,但是“排序”标题不知道该表,并且不显示箭头(指示当前的排序方向)。
JacekKościesza17年

Answers:


134

你误会matSortStartmatSortDirection

试试这个:

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

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

matSortStart 可用于颠倒排序时使用的循环(例如,当用户单击排序时,它从desc而不是asc开始)。


4
此方法仅在第一次工作。更改表的dataSource后,我尝试重新设置matSortActive和,matSortDirection但是不显示小箭头
Gil Epshtain,

似乎不工作了样品,我做了一个新问题: stackblitz.com/edit/angular-defaultsort?file=src/app/...

45

您可以通过调用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;

1
这是我正在寻找的那种,但是唯一的问题是它触发了matSortChange事件。有没有一种方法可以设置排序而不触发事件?
rain01

不,这就是调用排序的方式。您为什么不希望触发matSortChange事件?
Nino Filiu

1
因为我将其设置为使用列的asc/更新cookie,desc并且如果每次加载页面都调用它,则每次调用都将有所不同
rain01

16
@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;
}

2
请提供一些解释以及您的代码,以便以后的用户可以更轻松地遵循您的想法/代码。
HansHirse

1
我使用了来自Nino的排序和此处的CSS解决方法,以通过编程设置的排序来显示箭头。
bts

在角度7中,我只设置了this.sort = {active:'name',direction:'desc'}; 而且我不必为使箭头处于活动状态而添加任何CSS更改。
尼克·加里莫尔

尼克·加里莫尔(Nick Gallimore)也许您添加的CSS位置不正确?尝试将其添加到主要的全局CSS文件中(可以在asset / css / ... css中)
Aman Madiiarbekov,

10

材料更新(已通过v7.3测试):

@ViewChild(MatSort) matSort: MatSort;

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

这也将更新mat-sort-header的箭头,而没有任何解决方法


2

您还可以将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">

1

也许您尝试过在页面的初始位置调用按名称和方向强制执行的排序功能?

     ngOnInit() {
    let defSort: Sort = {};
    defSort.direction = 'asc';
    defSort.active = 'name';
    this.sortData(defSort);
  }

5
这不是正确的解决方案。表格已排序,但“排序”标题不知道该信息,并且不显示箭头(指示当前排序方向)
JacekKościesza17-10-14

1

在我的情况下,排序失败,因为matColumDef id和mat-cell var不同

<ng-container matColumnDef="firstName">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

在将matColumnDef =“ firstName”更改为matColumnDef =“ name ”之后,与项目相同。名称

    <ng-container matColumnDef="name">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

这对我来说可以


0

我必须在加载时进行默认排序

const matSort = { id: defaultSort.name } as MatSortable;
this.sort.direction = defaultSort.sort === 'asc' ? '' : defaultSort.sort === 'desc' ? 'asc' : 'desc' as SortDirection;
this.sort.sort(matSort);

0

@Andrew Seguin的答案(第一个被接受的答案)对我来说是视觉上的窍门,但它并没有 表格进行排序

我的解决方案是使用@Andrew Seguin提供的html代码并自己调用sortData(sort:Sort)方法,但是该怎么做?如文档中所指定,``,Sort''是一个具有两个属性的接口,分别是active和direction,并且该接口必须类似于以下内容:

export interface Sort {
   active:string //The id/name of the column being sorted
   direction:string //asc or dsc depending on the use case (The sort direction)
}

因此,窍门是在ngOnInit中调用sortData(sort:Sort)方法,如下所示:

ngOnInit(){
    //Do some nitialization
    this.sortData({active:'name', direction:'asc'});
}

sortData(sort: Sort) {
    //Your sorting algorithm (see examples in documentation, link above and at the bottom)
}

HTML代码与接受的答案相同;-)希望对Alex有所帮助

文档示例

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.