Angular单组件中多个Material分页功能失效问题

我明白你遇到的问题了——当你尝试给两个独立的表格绑定分页器和排序组件时，用同一个@ViewChild去获取实例会导致它们指向同一个对象，自然另一个表格的分页功能就失效了。咱们来一步步解决这个问题：

第一步：给模板中的组件添加唯一的引用变量 #

首先要在你的模板里，给两个表格的MatPaginator和MatSort分别加上唯一的模板引用变量，这样Angular才能精准区分它们：

<!-- 第一个表格 -->
<table mat-table [dataSource]="dataSource" *ngIf="showTable">
  <!-- 表格列定义 -->
  <mat-paginator #mainPaginator [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
  <mat-sort #mainSort></mat-sort>
</table>

<!-- 第二个报表表格 -->
<table mat-table [dataSource]="reportingDataSource" *ngIf="showReportTable">
  <!-- 报表表格列定义 -->
  <mat-paginator #reportingPaginator [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
  <mat-sort #reportingSort></mat-sort>
</table>

第二步：在组件类中分别获取对应的实例 #

接下来修改你的组件代码，通过模板引用变量分别获取每个分页器和排序组件的实例，同时保留setter的方式来处理*ngIf延迟加载的问题：

import { Component, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';

@Component({
  // 组件元数据
})
export class YourComponent {
  dataSource = new MatTableDataSource<any>();
  reportingDataSource = new MatTableDataSource<any>();

  // 第一个表格的分页器和排序
  @ViewChild('mainPaginator') set mainPaginator(mp: MatPaginator) {
    if (mp) {
      this.dataSource.paginator = mp;
    }
  }
  @ViewChild('mainSort') set mainSort(ms: MatSort) {
    if (ms) {
      this.dataSource.sort = ms;
    }
  }

  // 第二个表格的分页器和排序
  @ViewChild('reportingPaginator') set reportingPaginator(mp: MatPaginator) {
    if (mp) {
      this.reportingDataSource.paginator = mp;
    }
  }
  @ViewChild('reportingSort') set reportingSort(ms: MatSort) {
    if (ms) {
      this.reportingDataSource.sort = ms;
    }
  }

  // 你的其他逻辑，比如设置数据源数据
  constructor() {
    // 示例：给数据源赋值
    this.dataSource.data = [...];
    this.reportingDataSource.data = [...];
  }
}

为什么这样能解决问题？ #

• 原代码中你用同一个@ViewChild(MatPaginator)获取实例，Angular只会返回第一个匹配到的分页器，然后你把它同时赋值给了paginator和reportingPaginator——这两个变量其实指向同一个对象，自然只有一个表格的分页能工作。
• 通过添加模板引用变量，我们让@ViewChild能精准定位到对应的组件实例，每个分页器和排序都绑定到自己的数据源上，互不干扰。
• 保留setter的写法是为了应对*ngIf的延迟加载：当*ngIf条件满足、组件真正渲染后，setter会接收到实例，此时再给数据源绑定分页/排序就不会出现找不到实例的问题。

内容的提问来源于stack exchange，提问作者Sithys