mat-paginator ломается, когда mat-table находится внутри NgIf

У меня есть проект angular, который использует mat-table и mat-paginator для определенного представления, проблема в том, что представление имеет представление сетки и представление таблицы с переключателем, представление сетки по умолчанию, а таблица скрыта с помощью NgIf, когда представление сетки активно . Если я установил по умолчанию представление таблицы, то разбиение на страницы будет работать нормально, если я не переключаюсь на представление сетки и обратно, если по умолчанию, если установлено на сетку, она ломается, когда я переключаюсь на представление таблицы. Я предполагаю, что это потому, что таблица скрыта при запуске этого кода:

this.sliceList = new MatTableDataSource<Slice>(result);
this.sliceList.paginator = this.paginator;

Я пробовал вести журнал консоли this.sliceList, а sliceList.paginator не определено, когда вид сетки установлен по умолчанию, поэтому я предполагаю, что это проблема. Как я могу это исправить?


angular angular-material angular-material-table angular-material-paginator
person jmona789    schedule 07.05.2019    source источник

Ответы (4)


arrow_upward
20
arrow_downward

согласно этому потоку, попробуйте использовать [hidden] вместо * ngIf.

<div [hidden]="condition">
  <mat-table [dataSource]="dataSource">
  ...
  </mat-table>
</div>
person Amit Baranes    schedule 07.05.2019
comment
Работаем над Angular 12, спасибо! - person Isabella Monza; 06.07.2021

arrow_upward
7
arrow_downward

1-е решение

Переместить mat-paginator изнутри * ngIf div наружу

2-е решение

используйте static false при объявлении MatPaginator или MatSort

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
@ViewChild(MatSort, {static: false}) sort: MatSort;
person Muhammad Bilal    schedule 22.12.2019
comment
В моем случае я использовал второе решение, но с this.dataSource = new MatTableDataSource(my_data); setTimeout(() => this.dataSource.paginator = this.paginator);, и оно работает - person MargeKh; 02.02.2021

arrow_upward
1
arrow_downward

Это решает мою проблему в ANgular 10

Установка static в False помогает.

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: false}) sort: MatSort;

    ngAfterViewInit() {
        setTimeout(() => {
          this.matTableConfig.dataSource = new MatTableDataSource(this.matTableConfig.dataSource);
          this.matTableConfig.dataSource.paginator = this.paginator;
          this.matTableConfig.dataSource.sort = this.sort;
      });
person San Jaisy    schedule 22.08.2020

arrow_upward
0
arrow_downward

Создайте в file.html <div> с этими идентификаторами:

div id="dataFound" style="display:none;"
div id="dataNotFound" style="display:none;"

В file.ts

document.getElementById("dataFound").style.display = 'none';    /* ngIf = false     
document.getElementById("dataNotFound").style.display = 'inline'; /* ngIf = true
person Reinaldo Garcia    schedule 01.04.2020