Angular Material 排序号码分配不起作用

Question

我目前正在学习 Ajden 在 PluralSight 上的课程 "Angular Material"，但我遇到了一些奇怪的行为，与 table 一起使用的排序无法完全正常工作。在课程中，显示了 3 列，第一列包含数字，当我尝试对该列进行排序时，什么也没有发生，数字保持以递增的方式呈现。当我对第二列（文本列）进行排序时，排序工作正常，升序和降序。当我在对文本列进行排序后再次尝试对数字列进行排序时，排序应用于数字列但总是升序，从不降序。我是不是在我的代码中遗漏了什么或者这可能是 angular material 中的错误？我正在使用 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

Angular Material 排序号码分配不起作用

Angular Material Sorting a number assending doesn't work

sorting

angular-material2

angular

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