TS:
ngOnChanges() {
this.dataSource = new MatTableDataSource<Data>(this.someData); //work order data
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
超文本:
<table mat-table [dataSource]="dataSource" matSort>
<!-- column which does not sort is : -->
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td data-th="Customer Name" mat-cell *matCellDef="let element"> {{element.party.name}} </td>
</ng-container>
我已经尝试了所有的方式在谷歌搜索沿着这个网站也仍然没有答案,已经尝试了所有相关的答案:mat-sort-header / mat-sort not working on a particular column
但没有解决办法请帮帮忙。
4条答案
按热度按时间vxbzzdmp1#
我也遇到过同样的问题。
matColumnDef和属性名称应相同。
在HTML中:
在TS中:
此外,在分配数据源的位置:
zqry0prt2#
这里实际上有两个问题。
1.您没有正确初始化matSort。
您放入ngOnChanges中的代码应位于ngAfterViewInit中(请参见[官方文档](material.angular.io/components/table/overview#sorting,包含工作代码)
1.你必须帮助Material理解如何对你的列进行排序。Material假设列名与你的对象属性相同。所以在这里,Material试图基于
element.Name
进行排序,而element.Name
并不存在。你必须定义sortingDataAccessor,告诉类似于“如果你想对Name列进行排序,请改为查看element.party.name”的内容。2guxujil3#
更新对不起,我刚刚检查,无法工作,请删除赞成票
使用
mat-sort-header='party.name'
By defect short-header获取columnName的值,但您希望按www.example.com排序party.name
最好的办法是向数组的元素添加一个新属性“name”。
更新2关于您的评论
如果从API接收到一个对象数组,如
您可以按以下方式使用管道Map
所以你的元素阻碍了
并以“正常方式”使用垫桌
lo8azlld4#
我们无法使用对象进行排序,因为MatTableDataSource中的函数
sortingDataAccessor
是如何定义的(参见github)。但是我们可以创建一个类来覆盖这个函数
现在我们可以用
我们可以使用mat-sort-header这样的名称:“party.name“
请参见stackblitz中的示例