[英]Angular Material - mat-table sort row
How to sort angular material mat table based on a row?, I know we can sort based on columns using mat-sort but the requirement is to sort based on the row when you double click on it.如何根据行对有角度的材料垫表进行排序?,我知道我们可以使用 mat-sort 根据列进行排序,但要求是在双击时根据行进行排序。
<ng-container matColumnDef="Measure">
<th mat-header-cell *matHeaderCellDef>Measure</th>
<td mat-sort-header class="bold" mat-cell *matCellDef="let element">
{{ element.name }}
</td>
</ng-container>
Added the mat-sort-header directive to the td instead of th, but getting error - Cannot have two MatSortables with the same id (Measure).将 mat-sort-header 指令添加到 td 而不是 th,但出现错误 - 不能有两个具有相同 ID(测量)的 MatSortables。
You can use the Material CDK-Table and set any kind of sorting you want.您可以使用Material CDK-Table并设置您想要的任何类型的排序。 Check out the example from the official docs :查看官方文档中的示例:
<table matSort (matSortChange)="sortData($event)">
....
</table>
sortData(sort: Sort) {
const data = this.desserts.slice();
if (!sort.active || sort.direction === '') {
this.sortedData = data;
return;
}
this.sortedData = data.sort((a, b) => {
const isAsc = sort.direction === 'asc';
switch (sort.active) {
case 'name': return compare(a.name, b.name, isAsc);
case 'calories': return compare(a.calories, b.calories, isAsc);
case 'fat': return compare(a.fat, b.fat, isAsc);
case 'carbs': return compare(a.carbs, b.carbs, isAsc);
case 'protein': return compare(a.protein, b.protein, isAsc);
default: return 0;
}
});
} }
I had:我有:
displayedColumns: string[] = [
'guest-name',
'rental-name',
'check-in',
'check-out',
'check-in',
'guests',
'total',
'arrival-time',
] ]
Note check-in is being repeated twice which was causing following error:注意签入重复两次,导致以下错误:
"Cannot have two MatSortables with the same id" “不能有两个具有相同 ID 的 MatSortable”
Add mat-sort-header
to <th>
instead of to <td>
将mat-sort-header
添加到<th>
而不是<td>
I had this problem too today, it's just a silly mistake.我今天也有这个问题,这只是一个愚蠢的错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.