STACKBLITZ DEMO
我有一个材料表如下:
<table mat-table [dataSource]="dataSource" >
... Rows ...
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #MatPaginator [pageSizeOptions]="[4]" showFirstLastButtons></mat-paginator>
我需要在变量info
为false时隐藏表。
1.* * 尝试1:**
<table *ngIf="info" mat-table [dataSource]="dataSource" >
它工作正常,但是当info
为true并且所有行都显示在第一页上时,分页不起作用。
1.* * 尝试2:**
<table [hidden]="!info" mat-table [dataSource]="dataSource" >
使分页工作,但当info
为false时,表仍显示为无结果。
1.* * 尝试3:**
尝试使用div
对整个表进行sourround,并将*ngIf
应用于div。结果:与第一次尝试相同的问题。
已尝试将[hidden]
应用于div
,但仍无法隐藏。
1.* * 编辑:尝试4:**
直接应用于包络div
css style="display:none"
并获得与尝试3相同的结果,即使该表没有值也会显示。
关于如何在info
为false时隐藏表,在info
为true时显示表,并使用有效的分页,您有什么想法吗?
谢谢!
5条答案
按热度按时间fumotvh31#
用这种方法
stackblitz demo
确保在[隐藏]中更改您的条件
pbpqsu0x2#
您可以使用ngClass添加动态类,并使用该类隐藏表,如
在你的风格里. css
demo
wbgh16ku3#
你不能把paginator放在ngIf里面,否则,当你设置
this.dataSource.paginator = this.paginator
的时候,this.paginator
是未定义的。如果你真的想ngIf它,有一个解决方案(如果真的有必要,告诉我),但是我建议把它改为hidden
。ru9i0ody4#
Angular 8解:
eoigrqb65#
我遇到了同样的问题,因为我在模板中使用了
*ngIf
和async pipe
,分页不起作用。经过一番研究,我能够使用@ViewChild注解和一个set函数使它起作用,所以我决定在这里分享我的完整解决方案:)其他答案提出的
hidden
解决方案对我不起作用。在我的组件.ts文件中:
在我的模板文件中:
有了这个解决方案,我能够显示表中的数据并使分页工作。