Question

如何更改下面的Angular Material代码，以便数据表按名称排序＆＃39;列，默认为升序。必须显示箭头（表示当前的排序方向）。

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

原始代码：

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

应该工作。 demo

要显示排序方向箭头，请添加下一个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

影响行为的因素有很多。主要是使用 MatTableDataSource 与手工制作的 DataSource 衍生物。因此，不同的解决方案可能在某些情况下有效，而在其他情况下则无效。

无论如何，这是一个旧的 bug that's been well covered on GitHub。请为该 GitHub 问题点赞以引起 Angular 团队的注意。

在该 GitHub 线程 (link) 上发布的最持久的解决方案是在应用排序顺序时调用以下方法：

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

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

也许您是否尝试在页面的init上调用在名称和方向上强制执行的排序功能？

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

Answer 7

由于我的 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>

对我来说很好

Answer 8

材料更新（已通过v7.3测试）：

@ViewChild(MatSort) matSort: MatSort;

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

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

Answer 9

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

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

Answer 10

@Andrew Seguin的答案（第一个被接受的答案）对我来说是视觉上的窍门，但是它没有将排序在表格上。

我的解决方案是使用@Andrew Seguin提供的html代码并自己调用 sortData（sort：Sort）方法，但是该怎么做？如documentation中所指定，``，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代码与接受的答案相同；-) 希望这对任何人有帮助，亚历克斯

Documentation examples

Answer 11

要以编程方式添加排序，请将其添加到您的 css 中。

::ng-deep.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow { opacity: 1 !important; }

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

11 个答案: