Angular

Question

我在一个问题上卡住了一段时间，搜索了解决方案，但不幸的是，没有任何效果。

我在屏幕上渲染 5 table 秒。 table 数据是使用 GET 调用获取的。 table 的渲染没有问题，但我无法对它们实施分页。分页控件工作正常，但 table 数据未更新。我可以看到数组中的所有元素，我可以使用方向键四处移动，更改页面大小，但它对 table 没有影响。 table卡在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 小时）、打字错误或其他什么？或者是否有另一种方法来解决这个问题并使分页在 tables 上工作。

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。

Angular - 垫分页器：组件中的多个表

Angular - Mat Paginator : Multiple Tables in a component

html

javascript

angular-material