当 mat-table 位于 NgIf 内部时，mat-paginator 会中断答案

【问题标题】：mat-paginator breaks when mat-table is inside of NgIf当 mat-table 位于 NgIf 内部时，mat-paginator 会中断
【发布时间】：2019-09-25 11:32:40
【问题描述】：

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

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

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

【问题讨论】：

标签： angular angular-material angular-material-table angular-material-paginator

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

第一种解决方案

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

第二个解决方案

在声明 MatPaginator 或 MatSort 时使用 static false

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

【讨论】：

在我的情况下，我使用了第二个解决方案，但使用 this.dataSource = new MatTableDataSource(my_data); setTimeout(() => this.dataSource.paginator = this.paginator); 并且它有效

【解决方案3】：

这解决了我在 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;
      });

【讨论】：

【解决方案4】：

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

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

在文件.ts中

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

【讨论】：

【解决方案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>

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

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

<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>

【讨论】：