Angular MatPaginator 没有被初始化

Question

我有 2 个组件。两者都有 mat-table 和分页器，分页对一个组件有效，对另一个组件无效，尽管代码相似。下面是我的 html:

<div class="mat-elevation-z8">
    <mat-table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="col1">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Column1 </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.col1}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="col2">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Column2 </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.col2}} </mat-cell>
        </ng-container>

        <!-- Different columns goes here -->

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

    <mat-paginator #scheduledOrdersPaginator [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
</div>

下面是我在 component.ts 中的代码:

dataSource: MatTableDataSource<any>;
displayedColumns = ['col1', 'col2', ... ];

@ViewChild('scheduledOrdersPaginator') paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

ngOnInit(): void {
    // Load data
    this.dataSource = new MatTableDataSource(somearray);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

类似的代码适用于其他组件，并且表格使用分页正确呈现，不知道这段代码有什么问题。

非常感谢任何帮助

Answer 1

在我的例子中，<mat-paginator>元素位于一个容器内，该容器具有 *ngIf在它上面，直到异步加载数据才呈现。这导致 this.paginator成为undefined即使在 ngAfterViewInit .这会导致它以 MatTableDataSource 的形式无提示地失败。你设置paginator没问题至 undefined .

解决方案是移动 <mat-paginator>在*ngIf之外'd 容器

希望这对和我情况相同的人有所帮助。