Angular - Mat Paginator：组件中的多个表

Question

我现在被一个问题困扰了一段时间，正在寻找解决方案，但不幸的是，没有任何效果。

我正在屏幕上渲染 5 个表格。使用 GET 调用获取表数据。这些表格的渲染没有问题，但我无法在它们上实现分页。分页控件工作正常，但表数据未更新。我可以看到数组中的总元素，我可以使用方向键移动，更改页面大小，但对表格没有影响。表上粘着5条记录。

这是我的 .ts 文件

  @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();
  }

HTML 看起来像

  <div class="card">
    <div class="card-header">
        <b>Legal Address</b>
    </div>
      
    <div class="card-body">

      <div class="table" *ngIf="!GSTN_null">
        <div class="searchPagination">
          <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" class="mat-table_">

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

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

    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <b>GSTN Address</b>
    </div>

    <div class="card-body">

      <div class="table" *ngIf="!GSTN_null">
        <div class="searchPagination">
          <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" class="mat-table_">

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

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

    </div>
  </div>

  <div class="card">
    <div class="card-header">
        <b>Physical Address</b>
    </div>
        

    <div class="card-body">

      <div class="table" *ngIf="!physicalNull">

        <div class="searchPagination">
          <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" class="mat-table_">

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

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

    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <b>Organization Link</b>
    </div>

    <div class="card-body">

      <div class="table" *ngIf="!orgLinkNull">

        <div class="searchPagination">
          <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" class="mat-table_">
    //data
        </mat-table>
      </div>

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

    </div>
  </div>

  <div class="card">
    <div class="card-header"><b>Organization Alias</b></div>
        

    <div class="card-body">

      <div class="table" *ngIf="!orgAliasNull">

        <div class="searchPagination">
          <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" class="mat-table_">
//data
        </mat-table>
      </div>

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

    </div>
  </div>

我是否遗漏了什么（已经连续工作了 12 个小时）、拼写错误或其他什么？或者是否有另一种方法来解决这个问题并使分页在表格上工作。

Answer 1

首先告诉您的组件您要在 HTML 中绑定的 matPaginator 的别名。

例如，在 HTML 中，它应该是这样的：

 <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>

然后使用 ViewChild 别名属性在 .ts 组件中绑定到它们

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

最后，当您获取数据时，您应该将分页器绑定到MatTableDataSource您已经在订阅代码中执行的相应位置。