Mat-Sort не будет сортировать, когда таблица находится внутри аутентифицированного шаблона

Question

У меня есть таблица, данные поступают из базы данных Firebase. У меня проблема с сортировкой таблицы при использовании аутентификации. Я построил сайт на двух проектах stackblitz, один с и без аутентификации. Информация для входа на сайт, прошедший проверку подлинности: имя пользователя "test@test.com" и пароль "asdfjkl;"

Когда вы авторизуетесь на аутентифицированном сайте, вы увидите, что сортировка не работает, пока вы не нажмете кнопку сортировки, которая повторно запускает код

this.dataSource.sort=this.sort;

тогда сортировка работает отлично.

Сайт без аутентификации (сортировка работает сразу): https://stackblitz.com/edit/angular-sort-help-noauth

Сайт, требующий входа в систему (сортировка не будет работать, пока не будет нажата кнопка включения сортировки): https://stackblitz.com/edit/angular-sort-help

Что я делаю не так? Я не хочу, чтобы пользователи нажимали кнопку, чтобы включить сортировку. Спасибо,

Answer 1

Я подозреваю следующее:

Из-за <ng-template>, @ViewChild(MatSort) sort: MatSort; не получает элемент. (Это не в DOM. Это происходит, например, с нумерацией страниц).

Что вы можете сделать:

ЛЕГКО, но не чисто : просто скройте таблицу (дисплей: нет) вместо <ng-template>

ХОРОШО, но сложнее :

Вы определяете маршрут для входа в систему, который будет перенаправлять на другой маршрут с успешным соединением. И в компоненте этого маршрута у вас будет таблица.