заголовки matSort вообще не сортируют таблицу

Question

• Демонстрация в реальном времени: https://matsort -audionote.firebaseapp.com / (щелкните заголовок заголовка)
• Мой код: https://github.com/AskYous/audio-note/commit/75c667f66ec4e15a5dbd460ec044938782d672a4

Мне трудно заставить работать сортируемые заголовки. Я приложил живую демонстрацию моего приложения с не работающей сортировкой заголовка, а также код, который я использовал для реализации этого. Когда я нажимаю на заголовок, я не получаю ответ. Нет ошибок, нет сортировки, нет обратной связи. Я сделал следующее:

1. Добавлена ​​директива matSort к таблице.
2. Добавлен mat-sort-header к каждому заголовку.
3. Импортировано MatSortModule в app.module.ts.
4. Предоставлена ​​директива MatSort для источника данных таблицы.

Заголовки кликабельны, и у них есть переключающие стрелки, но строки не сортируются при клике.

Answer 1

Это потому, что вы инициализируете сортировку вашего источника данных как matSort, прежде чем таблица будет отображена в DOM (из-за * ngIf)

this.notes.sort = this.sort;

изменить эту строку

<table mat-table [dataSource]="notes" *ngIf="notes.data" matSort>

до

<table mat-table [dataSource]="notes" [hidden]="!notes.data" matSort>