Question

我目前正在PluralSight上学习Ajden的“ 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

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

1 个答案:

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