ngIf内部的MatPaginator异常行为?

时间:2019-11-05 11:34:27

标签: css angular typescript pagination angular-material

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为假时,该表仍然显示,没有结果。


  1. 尝试3:

试图用div包围整个表并将*ngIf应用于div。结果:与第一次尝试相同的问题。

试图将[hidden]应用于div,但仍不隐藏。


  1. 编辑:尝试4:

直接应用于不断发展的div css style="display:none"并获得与尝试3相同的结果,即使没有值,也会显示该表。


  

关于info为假时如何隐藏表格并将其显示的任何想法   info在工作分页中正确时是什么?

谢谢!

4 个答案:

答案 0 :(得分:0)

您可以使用ngClass添加动态类,并使用该类来隐藏表格,例如

[ngClass]="{'hidden': !info}"

和您的style.css

.hidden{
display:none;
}

demo

答案 1 :(得分:0)

使用这种方式

 [hidden]="true"

<div [hidden]="true" >
  <table mat-table [dataSource]="dataSource" >
      <ng-container matColumnDef="test">
        <th mat-header-cell *matHeaderCellDef> Test. </th>
          <td mat-cell *matCellDef="let exp"> {{exp}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>  
  <mat-paginator #MatPaginator [pageSizeOptions]="[2, 4, 6]" showFirstLastButtons> 
  </mat-paginator>
<div>

stackblitz demo

确保在[隐藏]中更改您的条件

答案 2 :(得分:0)

您不能将分页器放在ngIf内,否则,当您设置this.dataSource.paginator = this.paginator时,this.paginator是不确定的。如果您真的想ngIf(确实需要,请告诉我),有一个解决方案,但是我建议改为将其更改为hidden

答案 3 :(得分:0)

Angular 8解决方案:

可以使用

[隐藏] 代替 * ngIf ,并且可以使用CSS属性来激活选项卡。

 .tableClass .mat-tab-group.mat-primary .mat-ink-bar {
          width: 160px !important;
        }
<div [hidden]="true" class="tableClass">
     <mat-tab-group>
        <mat-tab label="Tab1">
        </mat-tab>
        <mat-tab label="Tab2">
        </mat-tab>
     </mat-tab-group>
</div>