当 mat-table 在 NgIf 内部时，mat-paginator 中断

Question

我有一个 angular 项目正在使用 mat-table 和 mat-paginator 用于特定视图，问题是该视图有一个网格视图和 table 视图一个切换，网格视图是默认的，当网格视图处于活动状态时，使用 NgIf 隐藏 table。如果我将默认设置为 table 视图，那么分页工作正常，除非我切换到网格视图并返回，如果默认设置为网格，当我切换到 table 视图时它会中断。我猜是因为 table 在这段代码运行时被隐藏了：

this.sliceList = new MatTableDataSource<Slice>(result);
this.sliceList.paginator = this.paginator;

我尝试了控制台日志记录 this.sliceList 并且当默认网格视图时 sliceList.paginator 未定义，所以我假设这是问题所在。我该如何解决这个问题？

Answer 1

根据此 thread，尝试使用 [hidden] 而不是 *ngIf。

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

Answer 2

第一个解决方案

将 mat-paginator 从内部 *ngIf div 移到外部

第二个解决方案

在声明 MatPaginator 或 MatSort 时使用 static false

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
@ViewChild(MatSort, {static: false}) sort: MatSort;

Answer 3

在 file.html 中使用这些 ID 创建 <div>：

div id="dataFound" style="display:none;"
div id="dataNotFound" style="display:none;"

在file.ts

document.getElementById("dataFound").style.display = 'none';    /* ngIf = false     
document.getElementById("dataNotFound").style.display = 'inline'; /* ngIf = true

Answer 4

这解决了我在 ANgular 10

中的问题

将 static 设置为 False 即可。

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: false}) sort: MatSort;

    ngAfterViewInit() {
        setTimeout(() => {
          this.matTableConfig.dataSource = new MatTableDataSource(this.matTableConfig.dataSource);
          this.matTableConfig.dataSource.paginator = this.paginator;
          this.matTableConfig.dataSource.sort = this.sort;
      });

Answer 5

我是这样用的
之前的代码：

 <div *ngIf="tableData?.data.length > 0; else noData">
      <mat-table [dataSource]="tableData" class="table-margin-0">
            ........
      </mat-table>
      <mat-paginator
            [pageSizeOptions]="[6, 10, 25, 50, 100]"
            showFirstLastButtons
      ></mat-paginator>
 </div>

现在这样使用，
通过在对我有用的 *ngIf 之外的分页器 中添加 [hidden]

这是有效的代码
之后的代码：

<div *ngIf="tableData?.data.length > 0; else noData"> <mat-table [dataSource]="tableData" class="table-margin-0"> ........ </mat-table> </div> <mat-paginator [hidden]="tableData?.data.length === 0" [pageSizeOptions]="[6, 10, 25, 50, 100]" showFirstLastButtons ></mat-paginator>

Answer 6

loaddata 阻碍了 mat paginator 的功能，因为 ng if 在这种情况下不起作用。而不是使用 *ngIf 使用 [hidden] = "condition on which u want to hide"

当 mat-table 在 NgIf 内部时，mat-paginator 中断

mat-paginator breaks when mat-table is inside of NgIf

angular-material

angular

angular-material-table

angular-material-paginator