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.

Continue reading...