Angular - Mat Paginator : Multiple Tables in a component-CodePudding

I am stuck on an issue for a while now, searched for solution but, unfortunately, nothing is working.

I am rendering 5 tables on the screen. The table data is fetched using a GET call. The tables are getting rendered without an issue but I am unable to implement pagination on them. The pagination controls work fine but the table data is not updated. I can see the total elements in the array and i can move around with the direction key, change the page size but it has no effect on table. The table is stuck on the five records.

Here is my .ts file

  @ViewChild(MatPaginator) paginatorLegal: MatPaginator;
  @ViewChild(MatPaginator) paginatorGSTN: MatPaginator;
  @ViewChild(MatPaginator) paginatorPHYS: MatPaginator;
  @ViewChild(MatPaginator) paginatorLink: MatPaginator;
  // @ViewChild(MatPaginator, {read: true}) paginatorLink: MatPaginator;
  @ViewChild(MatPaginator) paginatorAlias: MatPaginator;

  ORGANIZATION_LINK //I removed it from Datasource object to see if it will somehow fix the issue.

  DATASOURCES = {
    LEGAL_ADDRESS: <any>[],
    TELECOM_ADDRESS: <any>[],
    GSTN_ADDRESS: <any>[],
    PHYSICAL_ADDRESS: <any>[],
    ORGANIZATION_ALIAS: <any>[]
  }


  ngOnInit() {
    // this.organizationData.push(this.data['dataKey'])
    this.cust_service.organizationToViewOrg.subscribe(data => {
      this.organizationData = data
      this.legalAddressTableCreation(data[0].legalAddress)
      this.fetchTABLES();
    })
}


  fetchORGLINK() {
    this.cust_service.getOrgLink(this.organizationData[0]['orgNumber'], resp => {
      if (resp['data']['allOrganizationLinkList'].length > 0) {
        this.ORGANIZATION_LINK = new MatTableDataSource(resp['data']['allOrganizationLinkList'])
        // this.ORGANIZATION_LINK.paginatorLink = this.paginatorLink
        setTimeout(() => this.ORGANIZATION_LINK.paginator = this.paginatorLink);

      }
      else {
        this.orgLinkNull = true;
      }
    },
      err => {
        this.orgLinkNull = true;
      }
    );
  }


  fetchORGALIAS() {
    this.cust_service.getOrgAliasFn(this.organizationData[0]['orgNumber'], resp => {
      if (resp['data']['allOrganizationAliasList'].length > 0) {
        this.DATASOURCES.ORGANIZATION_ALIAS = new MatTableDataSource(resp['data']['allOrganizationAliasList'])
        setTimeout(() => { this.DATASOURCES.ORGANIZATION_ALIAS.paginator = this.paginatorAlias });
      }
      else {
        this.orgAliasNull = true;
      }
    },
      err => {
        this.orgAliasNull = true;
      })
  }


  fetchTABLES() {
    this.fetchGSTN(); // same implementation as fetch org link or fetch alias
    this.fetchPHYSICAL(); //same implementation as fetch org link or fetch alias
    this.fetchORGLINK();
    this.fetchORGALIAS();
  }

the HTML looks like

  <div >
    <div >
        <b>Legal Address</b>
    </div>
      
    <div >

      <div  *ngIf="!GSTN_null">
        <div >
          <mat-paginator #paginatorLegal [length]="this.DATASOURCES.LEGAL_ADDRESS?.filteredData?.length" [pageSize]="5"
            [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.DATASOURCES.LEGAL_ADDRESS" >

          //data
        </mat-table>
      </div>

      <div  *ngIf='GSTN_null'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

  <div >
    <div >
      <b>GSTN Address</b>
    </div>

    <div >

      <div  *ngIf="!GSTN_null">
        <div >
          <mat-paginator #paginatorGSTN [length]="this.DATASOURCES.GSTN_ADDRESS?.filteredData?.length" [pageSize]="5"
            [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.DATASOURCES.GSTN_ADDRESS" >

          //data
        </mat-table>
      </div>

      <div  *ngIf='GSTN_null'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

  <div >
    <div >
        <b>Physical Address</b>
    </div>
        

    <div >

      <div  *ngIf="!physicalNull">

        <div >
          <mat-paginator #paginatorPHYS [length]="this.DATASOURCES.PHYSICAL_ADDRESS?.filteredData?.length" [pageSize]="5"
            [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.DATASOURCES.PHYSICAL_ADDRESS" >

          //data
        </mat-table>
      </div>

      <div  *ngIf='physicalNull'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

  <div >
    <div >
      <b>Organization Link</b>
    </div>

    <div >

      <div  *ngIf="!orgLinkNull">

        <div >
          <mat-paginator #paginatorLink [length]="this.ORGANIZATION_LINK?.filteredData?.length" [pageSize]="5"
            [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.ORGANIZATION_LINK" >
    //data
        </mat-table>
      </div>

      <div  *ngIf='orgLinkNull'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

  <div >
    <div ><b>Organization Alias</b></div>
        

    <div >

      <div  *ngIf="!orgAliasNull">

        <div >
          <mat-paginator #paginatorAlias [length]="this.DATASOURCES.ORGANIZATION_ALIAS?.filteredData?.length"
            [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.DATASOURCES.ORGANIZATION_ALIAS" >
//data
        </mat-table>
      </div>

      <div  *ngIf='orgAliasNull'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

Is there something that I am missing (Been working for 12 hours straight), a typo or something? Or is there another way to tackle this issue and making the pagination work on the tables.

CodePudding user response：

First tell your component the alias of the matPaginator which you are going to bind in the HTML.

For Example in your HTML it should be like this:

 <mat-paginator #paginatorLegal="matPaginator"
 [length]="this.DATASOURCES.LEGAL_ADDRESS?.filteredData?.length" [pageSize]="5"
 [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>

 <mat-paginator #paginatorGSTN="matPaginator"
 [length]="this.DATASOURCES.GSTN_ADDRESS?.filteredData?.length" [pageSize]="5"
 [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>

And then bind to them in your .ts component using ViewChild alias property

 @ViewChild('paginatorLegal') paginatorLegal: MatPaginator;
 @ViewChild('paginatorGSTN') paginatorGSTN: MatPaginator;

and then finally when you get the data you should bind the paginators where the respective MatTableDataSource which you already did in the subscribe code.