CODEWITHSUNDEEP
angular
Fares Ayyad
Fares Ayyad

Reputation: 415

Angular material pagination isn't working probably when two tables exist

I have an issue with material pagination if there are two tables: the problem seems to be like this one: Multiple material pagination in one component doesn't work in Angular

i tried to implement the solution in above link, but in the console it give me:

this.paginator.toArray is not a function

here's my implementation: 

  customerTblArray: MatTableDataSource<any>;
  UnitModelsTblArray: MatTableDataSource<any>;
@ViewChild(MatPaginator) paginator = new QueryList<MatPaginator>();



 constructor(private _getCustSrv: GetCustomersService,  private _getUnitModels: GetUnitModelsService) {
    this._getCustSrv.GetAllCustomers().subscribe(r => {
      this.customerTblArray = new MatTableDataSource(r["result"]);
    });

    this._getUnitModels.GetAllUnitModels().subscribe(r => {
      this.UnitModelsTblArray = new MatTableDataSource(r["result"]);
    });
  }

  ngAfterViewInit(): void {
    this.customerTblArray.paginator = this.paginator.toArray()[0];
    this.UnitModelsTblArray.paginator = this.paginator.toArray()[1];
  }

.HTML code is very large, i use bootstrap modal to show up the content, at the end of each modal i put: 

<mat-paginator [pageSize]="3">
</mat-paginator>

but in the console shows an error:

this.paginator.toArray is not a function

even that all content are loaded correctly with material table except the pagination i doesn't work correctly.

Upvotes: 0

Views: 821

Answers (1)

FTello31
FTello31

Reputation: 59

Instead of: @ViewChild(MatPaginator) paginator = new QueryList<MatPaginator>();

put: @ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();

it will be enough.

Upvotes: 2

Related Questions