前端之家

  1. 首页
  2. 问答

ngIf内部的MatPaginator异常行为？

• 问答

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在工作分页中正确时是什么？

谢谢！

pking11 回答：ngIf内部的MatPaginator异常行为？

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

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

和您的style.css 

.hidden{
display:none;
}

demo

,

使用这种方式

 [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

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

,

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

,

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>

angularangular-materialcsspaginationtypescript
本文链接：https://www.f2er.com/3159993.html

大家都在问