对数字进行排序的角度材料不起作用

我目前正在学习Ajden的“角材料”课程“多元视觉”,我面临一些奇怪的行为,在与桌子一起使用的排序没有完全起作用。在本课程中,将显示3列,第一列包含数字,当我尝试对该列进行排序时,不会发生任何情况,数字将以呈现的一致方式保留。当我对第二列(即文本列)进行排序时,排序工作正常,既可以进行关联,也可以进行降序。当我在对文本列排序后再次尝试对数字列排序时,排序将应用于数字列,但始终是升序,而不是降序。我的代码中是否缺少某些内容,或者这可能是角度材料中的错误?我使用最新版本的角材料和角材料,因为我想学习的方式。

这是我迄今为止与排序相关的代码:

数字排序

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

将sort元素链接到数据源

@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