Angular Material Sorting a number assending doesn't work

Question

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

Answer 1

在mat-sort-header中，您必须传递要对其进行排序的json密钥，例如mat-sort-header =“ emp”