angular - Angular Material Sorting a number assending doesn't work
问题描述
I am currently following the course "Angular Material" by Ajden on PluralSight and I am facing some weird behaviour with the sorting which on used with a table is not working completely. In the course, 3 columns are shown, the first column contains numbers and when I try to sort that column, nothing happens, the numbers stays in a assending way presented. When I sort the second column, which is a text column, the sorting works fine, asscending as well as descending. When I try to sort the number column again after I sorted the text column, the sorting is applied to the number column but always ascending, never descending. Am I missing something in my code or is this perhaps a bug in angular material? I am using the newest versions of Angular and Angular Material because I want to learn it that way.
This is the code I have so far related to the sorting:
The number sorting
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> </mat-form-field>
<table mat-table matSort [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef mat-sort-header>No.</th>
<td mat-cell *matCellDef="let note"> {{note.id}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
<td mat-cell *matCellDef="let note"> {{note.title}} </td>
</ng-container>
<!-- Date Column -->
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>
<td mat-cell *matCellDef="let note"> {{note.date | date: 'd LLLL yyyy'}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>
<mat-paginator [pageSize]="2" [pageSizeOptions]="[1, 2, 5]" showFirstLastButtons></mat-paginator>
Linking the sort element to the datasource
@ViewChild(MatSort)
sort: MatSort;
ngAfterContentInit(): void {
this.dataSource = new MatTableDataSource<Note>(this.notes);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
I also put the code I have so far in a git repository, which can be found here
解决方案
在 mat-sort-header 中,您必须传递要对其进行排序的 json 键,例如 mat-sort-header="emp"
推荐阅读
- java - Android Studio Android Projekt 独立运行 Java
- java - 如何使用 Java 从网站获取和提取数字?
- machine-learning - 这些数字中的每一个在暗网中意味着什么?
- java - 使用Java字符串方法替换字符串中的字符
- javascript - Javascript - 橄榄球积分计算器
- ios - 如何识别ios设备中的唯一ID?
- c# - 如果在 lambda C# 中为 null,则为默认值
- java - 能不能用m个开关把所有的灯泡都转一下
- python - Python @property 用于编辑配置文件
- mysql - 无法使用 MySQL 安装程序或控制面板卸载 MySQL 服务器 8.0.13