我正在使用mat-table和角度材料的mat-sort-header。但奇怪的是,排序在6列中的2列(0和4)上工作正常。在对其他人进行分类时,一个条目总是被拉到顶部,其余条目保持未分类或随机排序'。我希望我能提供足够的代码来解决它。导入都在那里,这基本上是从https://v5.material.angular.io/components/table/examples复制粘贴的。
表格
其他所有列都与代码段中的列相似
<mat-table #matTable [dataSource]="dataSource" matSort>
<ng-container matColumnDef="Status">
<mat-header-cell *matHeaderCellDef mat-sort-header
....
打字稿
@ViewChild(MatSort) sort: MatSort;
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
ngOnInit() {
this.dataSource = new MatTableDataSource(this.projectlist);
}
//no specific code for sorting needed (I think)
我很抱歉截图是德语,但你应该明白我的意思。
排序
知道如何解决这个问题吗?
答案 0 :(得分:3)
要使matSortHeader正常工作,您需要确保matColumnDef与数据源对象的属性名称匹配。例如:
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef
mat-sort-header>
My header text
</mat-header-cell>
<mat-cell *matCellDef="let row">
{{row.status}}
</mat-cell>
</ng-container>
matColumnDef是状态,因此您的行也应该具有完全相同名称的属性:
export class MyDataSet {
status: string;
}
否则排序操作员无法完成其工作。您也可以编写自己的dataAccessor:
this.datasource.sortingDataAccessor = ((item: MyDataSet, sortHeaderId: string) => {
// write code to get your property out of item using sortHeaderId
});
此处提供了一些更多信息:https://material.angular.io/components/table/api#MatTableDataSource