Angular Material对数字进行排序不起作用

Question

我目前正在学习 Ajden 在 PluralSight 上的“Angular Material”课程，但我正面临一些奇怪的行为，即与表格一起使用的排序无法完全正常工作。在课程中，显示​​了 3 列，第一列包含数字，当我尝试对该列进行排序时，没有任何反应，数字保持在显示的方式中。当我对第二列（文本列）进行排序时，排序工作正常，可以升序也可以降序。当我在对文本列进行排序后再次尝试对数字列进行排序时，排序将应用于数字列，但始终升序，从不降序。我的代码中是否缺少某些内容，或者这可能是角度材料中的错误？我正在使用最新版本的 Angular 和 Angular Material，因为我想以这种方式学习它。

这是我到目前为止与排序相关的代码：

数字排序

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

将排序元素链接到数据源

@ViewChild(MatSort) 
sort: MatSort;

ngAfterContentInit(): void {
    this.dataSource = new MatTableDataSource<Note>(this.notes);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

我还把我目前拥有的代码放在了一个 git 存储库中，可以在 here 找到它

Answer 1

在 mat-sort-header 中，您必须传递要排序的 json 键，例如 mat-sort-header="emp"