Question

我有一个对某个视图使用mat-table和mat-paginator的角度项目，问题是该视图具有带切换的网格视图和表格视图，网格视图为默认表格当网格视图处于活动状态时，使用NgIf隐藏该元素。如果将默认值设置为表格视图，则分页工作正常，除非我切换到网格视图并返回，如果默认值设置为grid，则在我切换到表格视图时它将中断。我猜是因为在运行此代码时表已隐藏：

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

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

Answer 1

我有同样的问题。最终用div和* ngIf这个div包裹了整个内容。

更新：根据此thread，尝试使用[hidden]代替* ngIf。

Answer 2

第一个解决方案

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

第二个解决方案

在声明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;
      });

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

4 个答案: