问题
I have an angular project that is using mat-table
and mat-paginator
for a certain view, the problem is the view has a grid view and table view with a toggle, the grid view is default and table is hidden using an NgIf when the grid view is active. If I set the default to the table view then pagination works fine unless I swap to grid view and back, if the default if set to grid it breaks when I swap to the table view. I'm guessing its because the table is hidden when this code runs:
this.sliceList = new MatTableDataSource<Slice>(result);
this.sliceList.paginator = this.paginator;
I tried console logging this.sliceList
and sliceList.paginator
is undefined when the grid view is defaulted so I assuming this is the issue. How Can I fix this?
回答1:
I had the same issue. ended up wrap the whole thing with div and *ngIf this div.
Update : according to this thread,try use [hidden] instead of *ngIf.
<div [hidden]="condition">
<mat-table [dataSource]="dataSource">
...
</mat-table>
</div>
回答2:
1st Solution
Move mat-paginator from inside *ngIf div to outside
2nd Solution
use static false while declaring MatPaginator or MatSort
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
@ViewChild(MatSort, {static: false}) sort: MatSort;
来源:https://stackoverflow.com/questions/56028775/mat-paginator-breaks-when-mat-table-is-inside-of-ngif