当mat-table位于NgIf内部时，mat-paginator中断 [英] mat-paginator breaks when mat-table is inside of NgIf

问题描述

我有一个对某个视图使用mat-table和mat-paginator的角度项目，问题是该视图具有带切换的网格视图和表格视图，网格视图为默认设置，并且表格使用NgIf网格视图处于活动状态时.如果将默认值设置为表格视图，则分页可以正常工作，除非我切换到网格视图并返回，否则如果将默认值设置为grid，则在我切换到表格视图时它将中断.我猜是因为在运行此代码时该表已隐藏:

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;

我尝试了控制台日志记录this.sliceList，并且当默认网格视图时，未定义sliceList.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?

推荐答案

根据此 thread ，请尝试使用[hidden]代替* ngIf.

according to this thread,try use [hidden] instead of *ngIf.

<div [hidden]="condition">
  <mat-table [dataSource]="dataSource">
  ...
  </mat-table>
</div>

这篇关于当mat-table位于NgIf内部时，mat-paginator中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！