Угловой материал Сортировка номера не работает - PullRequest
Новая
       13

Угловой материал Сортировка номера не работает

0 голосов
/ 18 января 2019

В настоящее время я слежу за курсом «Угловой материал» Айдена на PluralSight и столкнулся с некоторым странным поведением с сортировкой, которая при работе с таблицей не работает полностью.В ходе курса показаны 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, который можно найти здесь

1 Ответ

0 голосов
/ 18 января 2019

в mat-sort-header вам нужно передать ключ json, по которому вы хотите отсортировать, например, mat-sort-header = "emp"

...