Angular MatPaginator 没有被初始化

问题描述

我有 2 个组件.两者都有 mat-table 和分页器，分页适用于一个组件，而不适用于另一个组件，尽管代码相似.以下是我的 html:

<mat-table [dataSource]="dataSource";垫排序><ng-container matColumnDef=col1"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>列 1 </mat-h​​eader-cell><mat-cell *matCellDef=让行">{{row.col1}} </mat-cell></ng-容器><ng-container matColumnDef=col2"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>Column2 </mat-h​​eader-cell><mat-cell *matCellDef=让行">{{row.col2}} </mat-cell></ng-容器><!-- 不同的列在这里--><mat-h​​eader-row *matHeaderRowDef=displayedColumns"></mat-h​​eader-row><mat-row *matRowDef="let row;列:displayedColumns;"></mat-row></mat-table><mat-paginator #scheduledOrdersPaginator [pageSizeOptions]=[5, 10, 20]"></mat-paginator>

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

dataSource: MatTableDataSource;displayColumns = ['col1', 'col2', ... ];@ViewChild('scheduledOrdersPaginator') 分页器:MatPaginator;@ViewChild(MatSort) 排序:MatSort；ngOnInit(): 无效 {//加载数据this.dataSource = new MatTableDataSource(somearray);this.dataSource.paginator = this.paginator;this.dataSource.sort = this.sort;}

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

任何帮助将不胜感激

解决方案

Angular 7+ (8/9/10/11/12)还有另一种优雅的解决方案可以解决这个问题.

短版

设置数据源后立即调用ChangeDetectorRef.detectChanges().

长版

第一步:

导入 ChangeDetectorRef &材料相关的东西

import { ..., ChangeDetectorRef } from '@angular/core';从@angular/material"导入 { MatSort, MatTableDataSource, MatPaginator };

步骤 2:

在组件中设置类属性

@ViewChild(MatSort) 排序:MatSort;@ViewChild(MatPaginator) 分页器:MatPaginator；

第三步:

在构造函数中注入 ChangeDetectorRef

constructor (..., private cdr: ChangeDetectorRef, ...) { ... }

步骤 4:

设置数据源并调用detectChanges()

this.dataSource = new MatTableDataSource (MY_DATA);this.cdr.detectChanges();

可选步骤:

之后，您可以设置其他属性，例如

this.dataSource.sort = this.sort;this.dataSource.paginator = this.paginator;

I have 2 components. Both have mat-table and paginators and pagination is working for one component and not working for the other component though the code is similar. Below is my 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>

And below is my code in 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;
}

Similar code is working for the other component and table is getting rendered with the pagination properly, no clue what's wrong with this code.

Any help would be really appreciated

解决方案

Angular 7+ (8/9/10/11/12)There is another elegant solution to solve that problem.

Short Version

Immediately after setting data source invoke ChangeDetectorRef.detectChanges().

Long Version

Step1:

Import ChangeDetectorRef & Material related stuff

import { ..., ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';

Step2:

Set class-properties in your component

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

Step3:

Inject ChangeDetectorRef in your constructor

constructor (..., private cdr: ChangeDetectorRef, ...) { ... }

Step4:

Set data source and invoke detectChanges()

this.dataSource = new MatTableDataSource (MY_DATA);
this.cdr.detectChanges();

Optional Steps:

After that, you can set other properties like

this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;

这篇关于Angular MatPaginator 没有被初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！