Angular: MatSort не сортирует таблицу по заголовку столбца

Question

Я новичок в Angular, я работаю над проектом, в котором мне нужно отсортировать таблицу по столбцу, поэтому я использую MatSort из углового материала, https://material.angular.io/components/table/examples Таблица с сортировкой.Однако я могу получить таблицу вместе со значениями, но не смог отсортировать таблицу.

Вот мой код.

admin-user.component.html:

<table mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8">

<!-- UserID Column -->
<ng-container matColumnDef="userid">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> User ID </th>
    <td mat-cell *matCellDef="let element"> {{element.userId}} </td>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.userName}} </td>
</ng-container>

<!-- Title Column -->
<ng-container matColumnDef="booktitle">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>
    <td mat-cell *matCellDef="let element"> {{element.bookTitle}} </td>
</ng-container>

<!-- Author Column -->
<ng-container matColumnDef="bookname">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Author </th>
    <td mat-cell *matCellDef="let element"> {{element.bookAuthor}} </td>
</ng-container>

<!-- Issue Date Column -->
<ng-container matColumnDef="issuedate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Issue Date </th>
        <td mat-cell *matCellDef="let element"> {{element.issueDate}} </td>
    </ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

admin-user.component.ts:

export class AdminUserComponent implements OnInit {
users: User2[];
displayedColumns: string[] = [
    'userid',
    'username',
    'booktitle',
    'bookname',
    'issuedate'
];
dataSource: MatTableDataSource<IssueDetail>;

@ViewChild(MatSort) sort: MatSort;

issueList: IssueDetail[];

constructor(
    public userService: UserService,
    public bookService: BookService,
    public router: ActivatedRoute
) {
    // this.issueList = this.router.snapshot.data['resolvedData'];
    // console.log(this.issueList);
}

ngOnInit() {
    this.issueList = [];
    this.userService.getAllUsers().subscribe(users => {
        this.users = users.filter(user => user.checkout.length > 0);
        for (let i = 0; i < this.users.length; i++) {
            for (let j = 0; j < this.users[i].checkout.length; j++) {
                console.log(this.users[i].checkout);
                this.issueList.push(
                    new IssueDetail(
                        this.users[i].id,
                        this.users[i].name,
                        this.users[i].checkout[j].book.title,
                        this.users[i].checkout[j].book.author,
                        this.users[i].checkout[j].startDate + ''
                    )
                );
            }
        }
        console.log(this.issueList);
        this.dataSource = new MatTableDataSource(this.issueList);
        this.dataSource.sort = this.sort;
    });
}}

Спасибо за любую помощь заранее. введите описание изображения здесь

введите описание изображения здесь

IssueDetail - такой класс:

export class IssueDetail {
constructor(
    public userId: number,
    public userName: string,
    public bookTitle: string,
    public bookAuthor: string,
    public issueDate: string
) {
    this.userId = userId;
    this.userName = userName;
    this.bookTitle = bookTitle;
    this.bookAuthor = bookAuthor;
    this.issueDate = issueDate;
}}

Я также заметил, что в каждом примере они используют интерфейс.Но я пытаюсь отсортировать код по классу.Но я не знаю, имеет ли это какое-то значение или нет.

Answer 1

Используйте этот хук жизненного цикла: ( ngAfterViewInit )

@ViewChild(MatSort) sort: MatSort;

  ngAfterViewInit() {
        this.dataSource.sort = this.sort;
    }

например.мата таблицы:

<mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="date">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
        <mat-cell *matCellDef="let element">{{ element.date | date }}</mat-cell>
    </ng-container>
</mat-table>

Answer 2

Ваш код в порядке, Что я видел, Попробуйте следующий код

setTimeout(() => { 
   this.dataSource.sort = this.sort;
}, 0);

Пример