MatPaginator gets undefined

问题

I have replicated thsi case: Angular 5 Material Table not getting data from service

But when I try access any property from paginator I get undefined error from this objet.

Any ideas?

Thanks

回答1:

I got the same issue. Placing mat-paginator tag outside *ngIf resolved my issue. Make sure it is available to component class without any conditions.

回答2:

Some issues that may cause mat-paginator is undefined:

You forgot to import in app.module.ts import { MatPaginatorModule } from '@angular/material'; and then declare the import in the imports array inside ngModule.

@NgModule({ declarations: [ somestuff], imports: [ MatPaginatorModule]});
Import MatPaginator inside the component you are using: import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
set the MatDataSource to be none. (only need to do this if you are going to be getting async data e.g. from a server)

this.dataSource = new MatTableDataSource([]);
Make sure you set the length property of the mat-paginator to the length of the data rows returned.
Set the paginator inside NgAfterViewInit method or if that doesn't work try:

private paginator: MatPaginator; private sort: MatSort;

@ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.setDataSourceAttributes();
}

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setDataSourceAttributes();
}

setDataSourceAttributes() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

    if (this.paginator && this.sort) {
        this.applyFilter('');
    }
}

回答3:

MatPaginator being undefined most likely means you do not have the module imported. Sometimes angular mat does not explicitly tell you these things that you are missing. But always check the API tab under their documentation before using a component. At your module level, you should have the following in your app.module.ts file.

the import

import { MatButtonModule, MatTableModule, MatPaginatorModule, MatProgressSpinnerModule, MatTableDataSource } from '@angular/material';

Your component imported that used paginator of course

import { TableComponent } from './table/table.component';

Those modules imported in your imports array

imports: [
    BrowserAnimationsModule,
    NgbModule.forRoot(),
    FormsModule,
    RouterModule,
    AppRoutingModule,
    CommonModule,
    MatButtonModule,
    MatTableModule,
    BrowserAnimationsModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    HttpClientModule
],

And those modules exported if necessary (different topic so I wont discuss here).

exports: [
    MatButtonModule,
    MatTableModule,
    MatPaginatorModule
],

This is all happening in my App.Module

export class AppModule { }

This assuming you do bot have your project structured as feature modules. In that case you would really only need everything I talked about in the module in which your component lives. But in this case, where everything is under the app module, this works just fine.

回答4:

"Inserting an *ngIf means that its contents cannot be queried until the view is initialized with change detection. This means the query for sort is empty at ngOnInit.

This can be resolved by changing the setup from ngOnInit to ngAfterViewInit. https://stackblitz.com/edit/angular-mewfek?file=src/app/app.component.ts "

reference https://github.com/angular/components/issues/15966

回答5:

double check you have paginator component in your html

<mat-paginator [pageSizeOptions]="[50, 100, 200]" [length]="resultsLength" showFirstLastButtons></mat-paginator>

来源：https://stackoverflow.com/questions/47593169/matpaginator-gets-undefined

标签

angular-material2