角度材质排序头中的默认排序

如何更改下面的角材料代码，使数据表按“名称”列排序，默认为升序。必须显示箭头(指示当前排序方向)。

这就是我想实现的目标:

enter image description here

原始代码:

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

这是 笨蛋的链接

155536 次浏览
小开

也许您曾经尝试过调用页面 init 的名称和方向上强制执行的排序函数？

     ngOnInit() {
let defSort: Sort = {};
defSort.direction = 'asc';
defSort.active = 'name';
this.sortData(defSort);
}
小开
最佳答案

你把 matSortStart错当成 matSortDirection了。

试试这个:

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

Https://stackblitz.com/edit/angular-defaultsort?file=src/app/sort-overview-example.html

matSortStart可以用来逆转排序时使用的循环(例如，当用户单击排序时，它从 desc 而不是 asc 开始)。

编辑: 感谢 Ben 提供了一个更新的示例

小开

可以通过调用数据源的 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;
小开 
@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;
}
小开

更新材料 (使用 v7.3测试) :

@ViewChild(MatSort) matSort: MatSort;


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

这也将更新 mat-sort-header的箭头没有任何变通方法

小开

在我的例子中，排序不起作用，因为 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 = “ 姓名”，这与 item.姓名相同

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

我觉得挺好的

小开

还可以将垫表排序属性绑定到组件变量。

正如@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">
小开

我必须对加载进行默认排序

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

来自@Andrew Seguin 的答案(第一个也是被接受的答案)给了我一个视觉上的骗局，但是表格是 没有 排序。

我的解决方案是使用@Andrew Seguin 提供的 html 代码并自己调用 SortData (Sort: Sort)方法，但是如何做呢？ 如 文件所指定，“ ，Sort”是一个具有两个属性的接口，活动的和方向的，接口必须是这样的:

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 代码与公认的答案相同; -) 希望这对大家有帮助, 亚历克斯

文档示例

小开

影响这种行为的因素有几个。主要是使用 MatTableDataSource与手工制作的 数据源衍生物。因此，不同的解决方案可能在某些情况下起作用，而在其他情况下不起作用。

无论如何，这是一个旧的 在 GitHub 上已经被很好地覆盖的 bug。请升级 GitHub 的问题，以吸引角度团队的注意。

在 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 });
}
小开

要通过编程方式添加排序，请在 css 上添加此内容。

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

小开

可以添加以下代码

   ngAfterViewInit{
this.sort.disableClear = true;
this.sort.sort({disableClear: true, id:sortEnabledColumns.id,start:'asc'})
}

如果没有第一行，当你点击第三次时，它会进入默认的隐藏状态

小开 
I found this in Github, works fine for me
      

@ViewChild(MatSort) sort: MatSort;
//reset state so that start is the first sort direction that you will see
this.sort.sort({ id: null, start: 'desc', disableClear: true });
this.sort.sort({ id: 'FieldNameToSort', start: 'asc', disableClear: true });
this.sort.sortChange.emit(this.sort);
(this.sort.sortables.get('FieldNameToSort') as MatSortHeader)._setAnimationTransitionState({ toState: 'active' });

提交答案