13

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

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

我尝试了控制台日志记录this.sliceList，并且sliceList.paginator在默认网格视图时未定义，所以我认为这是问题所在。我怎样才能解决这个问题？

4

5 回答 5

25

根据这个线程，尝试使用 [hidden] 而不是 *ngIf。

<div [hidden]="condition">
  <mat-table [dataSource]="dataSource">
  ...
  </mat-table>
</div>
于 2019-05-07T18:53:56.310 回答
7

第一种解决方案

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

第二个解决方案

在声明 MatPaginator 或 MatSort 时使用 static false

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
@ViewChild(MatSort, {static: false}) sort: MatSort;
于 2019-12-22T16:36:00.607 回答
1

这解决了我在 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;
      });
于 2020-08-22T17:10:37.177 回答
0

<div>使用以下 ID在 file.html 中创建：

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
于 2020-04-01T21:45:44.390 回答
0

对我来说，我之前使用过这样的
代码：

 <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>
于 2021-12-02T10:47:19.083 回答