Angular中Mat Table的Mat Paginator无法工作求助

问题场景 #

项目中为Mat Table添加Mat Paginator后，表格可正常渲染数据，但分页器完全不生效。原代码实现如下：

HTML文件 #

<div class="container mt-4">
  <mat-card>
    <mat-card-header></mat-card-header>
    <mat-card-content>
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <!-- Position Column -->
        <ng-container matColumnDef="Company Name">
          <th mat-header-cell *matHeaderCellDef>Company Name</th>
          <td mat-cell *matCellDef="let element">{{ element.companyName }}</td>
        </ng-container>

        <ng-container matColumnDef="Industry">
          <th mat-header-cell *matHeaderCellDef>Industry</th>
          <td mat-cell *matCellDef="let element">{{ element.industryName }}</td>
        </ng-container>

        <ng-container matColumnDef="Office Premisis No.">
          <th mat-header-cell *matHeaderCellDef>Office Premisis No.</th>
          <td mat-cell *matCellDef="let element">
            {{ element.officePremisisNo }}
          </td>
        </ng-container>

        <ng-container matColumnDef="Mobile No.">
          <th mat-header-cell *matHeaderCellDef>Mobile No.</th>
          <td mat-cell *matCellDef="let element">
            {{ element.primaryMobileNo }}
          </td>
        </ng-container>

        <ng-container matColumnDef="Details">
          <th mat-header-cell *matHeaderCellDef>Actions</th>
          <td mat-cell *matCellDef="let element">
            <a (click)="onClick(element.id)">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                x="0px"
                y="0px"
                width="30"
                height="30"
                viewBox="0 0 48 48"
              >
                <path
                  fill="#2196f3"
                  d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"
                ></path>
                <path
                  fill="#fff"
                  d="M22 22h4v11h-4V22zM26.5 16.5c0 1.379-1.121 2.5-2.5 2.5s-2.5-1.121-2.5-2.5S22.621 14 24 14 26.5 15.121 26.5 16.5z"
                ></path>
              </svg>
            </a>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayColumn"></tr>
        <tr mat-row *matRowDef="let row; columns: displayColumn"></tr>
      </table>
    </mat-card-content>
    <mat-card-footer>
      <mat-paginator
        [pageSizeOptions]="[5, 10, 15, 20]"
        showFirstLastButtons
      ></mat-paginator>
    </mat-card-footer>
  </mat-card>
</div>

TS文件 #

export class Table5Component implements OnInit {
  public Companies: any;
  public dataSource: any = [];

  public displayColumn: string[] = [
    'Company Name',
    'Industry',
    'Office Premisis No.',
    'Mobile No.',
    'Details',
  ];
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  constructor(private companyService: CompanyService) {}

  ngOnInit()  {
    this.CompanyList();
  }

  CompanyList = () => {
    this.companyService.getCompany('addCompany').subscribe((data) => {
      console.log(data);
      this.Companies = data;
      this.dataSource = data;
      this.dataSource.paginator = this.paginator;
    });
  };

  onClick = (id: any) => {
    alert(id);
  };
}

问题原因 #

1. 数据源类型错误：直接将dataSource赋值为普通数组，普通数组不具备paginator属性，无法与Mat Paginator绑定交互。
2. 生命周期时机问题：异步请求完成时，视图可能尚未初始化完成，导致paginator实例未被正确获取，绑定操作无效。

修复方案 #

1. 使用MatTableDataSource包装数据源 #

在TS文件中导入MatTableDataSource，并将dataSource声明为该类型：

import { MatTableDataSource } from '@angular/material/table';

修改dataSource定义：

public dataSource = new MatTableDataSource<any>([]);

2. 在正确生命周期钩子中绑定分页器 #

实现AfterViewInit接口，在视图初始化完成后绑定分页器，确保paginator已被正确获取：

import { OnInit, AfterViewInit } from '@angular/core';

export class Table5Component implements OnInit, AfterViewInit {
  // ... 其他代码

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }

  CompanyList = () => {
    this.companyService.getCompany('addCompany').subscribe((data) => {
      console.log(data);
      this.Companies = data;
      this.dataSource.data = data; // 通过data属性更新数据源
    });
  };
}

3. （可选）明确分页器模板引用 #

在HTML的mat-paginator上添加模板引用，让绑定更清晰：

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 15, 20]" showFirstLastButtons></mat-paginator>

然后在TS中指定引用：

@ViewChild('paginator') paginator!: MatPaginator;

关键说明 #

• MatTableDataSource是Angular Material专为表格设计的数据源类，内置分页、排序、过滤等功能支持，必须使用它才能让分页器正常工作。
• ngAfterViewInit生命周期钩子会在所有视图元素初始化完成后触发，此时@ViewChild才能正确获取到MatPaginator实例，避免绑定无效的问题。

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