Если добавляю вторую МатТаблицу на страницу, у них начинают конфликтовать пагинаторы
export class StatsComponent implements OnInit {
dataSource_us: MatTableDataSource<any>;
@ViewChild(MatPaginator, {static: true}) paginator_us: MatPaginator;
dataSource_tr: MatTableDataSource<any>;
@ViewChild(MatPaginator, {static: true}) paginator_tr: MatPaginator;
getStats() {
this.statsService.getStats().subscribe((data: any) => {
// Здесь формируется первая таблица
this.dataSource_us = new MatTableDataSource(ustable);
this.dataSource_us.paginator = this.paginator_us;
// Здесь формируется вторая таблица
// И отсюда начинаются проблемы - в обоих таблицах спутывается пагинация
this.dataSource_tr = new MatTableDataSource(trtable);
this.dataSource_tr.paginator = this.paginator_tr;
Я думаю надо как-то привязать mat-paginator к таблице, сейчас в шаблоне все выглядит так:
</table><mat-paginator [pageSizeOptions]="[2, 5, 30]" showFirstLastButtons></mat-paginator>
</table><mat-paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons></mat-paginator>
UPD:
Решение оказалось простым:
https://stackoverflow.com/questions/50428605/multi...
Но вылезла еще одна проблема:
У меня таблицы формируются либо из локалсторадж либо из обращения к серверу, разрешенное условно раз в минуту.
Так вот. когда данные приходят с сервера, то все нормально, а когда с локалсторадж, то пагинатор не успевает принять значение (это на мой дилетантский взгляд, в консоле matpaginator = undefined). Я продублировал this.dataSource_us.paginator = this.paginator.toArray()[0]; и другие в ngAfterViewInit
Визуально все заработало хорошо, но теперь при обращении к серверу (разрешенное не чаще раза в минуту) консоль выдает ошибку: undefined is not an object (evaluating 'this.dataSource_us.paginator = this.paginator.toArray()[0]') in ngAfterViewInit. Понятно, что никому, в том числе мне, ничего непонятно, но если вдруг кто-то понял о чем речь, то буду рад любым подсказкам.
Подошел бы какой-нибудь костыль с условием, что если в функции (в подписке subscribe) пагинатор сработал, то в ngAfterViewInit ничего не делать, но сообразить сам не могу.
UPD:
Не смотря на советы вынести таблицу в отдельный компонент, я решил костыльнуть так:
В подписке после формирования таблиц поставил маячек, который отправит в ngAfterViewInit, что пагинатор не успел сработать
Средний
