Angular Material分页失效：表格未按配置显示指定行数

问题现象 #

通过API获取数据后，表格未按设置的分页规则展示（每页3/6条），所有数据直接全部显示，点击分页按钮无法切换每页行数。

核心错误点及修复方案 #

1. 表格数据源绑定错误 #

HTML中表格直接绑定原始数组users，但Angular Material分页功能需要绑定MatTableDataSource实例才能生效。
修复代码（user.component.html）：
将表格的[dataSource]从users改为dataSource：

<table mat-table [dataSource]="dataSource">

2. 异步数据加载导致数据源初始化时机错误 #

ngAfterViewInit执行时API请求尚未完成，users数组为空，此时初始化的dataSource无法关联后续加载的数据。需在API请求成功后再初始化/更新数据源。
修复代码（users.component.ts）：
在API订阅回调中完成数据源初始化与分页器绑定：

getUserList() {
  this.apiService
  .getUsers()
  .subscribe((data:any) => {
    // 修复数组嵌套问题：移除多余的[]，直接赋值API返回的用户数组
    this.users = data.data;
    // 初始化数据源并绑定分页器
    this.dataSource = new MatTableDataSource(this.users);
    this.dataSource.paginator = this.paginator;
  });
}

同时可移除ngAfterViewInit中的数据源初始化代码，避免无效操作。

3. 数据赋值错误（数组嵌套） #

原代码this.users = [data.data];会将API返回的用户数组再嵌套一层，导致表格遍历的是外层数组的单个元素（整个用户数组），分页无法正确计算总条数。需直接赋值data.data（假设API返回的data.data为用户数组）。

4. 调整分页选项（按需修改） #

若需要每页显示3或6条数据，修改mat-paginator的pageSizeOptions：

<mat-paginator #paginator [pageSizeOptions]="[3, 6]" showFirstLastButtons></mat-paginator>

完整修复后代码 #

users.component.ts #

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Users } from '../users';
import { ApicallService } from '../apicall.service';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-users-data',
  templateUrl: './users-data.component.html',
  styleUrls: ['./users-data.component.css']
})
export class UsersDataComponent implements OnInit, AfterViewInit{
  @ViewChild('paginator') paginator: MatPaginator;
  users : Users[] =[];
  dataSource: MatTableDataSource<Users>;
  
  constructor(public http: HttpClient, private apiService: ApicallService){}
  
  displayedColumns: string[] = ['ID', 'Avatar', 'First Name', 'Last Name'];
  
  ngOnInit(){
    this.getUserList();
  }

  getUserList() {
    this.apiService
    .getUsers()
    .subscribe((data:any) => {
      this.users = data.data;
      this.dataSource = new MatTableDataSource(this.users);
      this.dataSource.paginator = this.paginator;
    });
  }
}

user.component.html #

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="ID">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

    <ng-container matColumnDef="Avatar">
      <th mat-header-cell *matHeaderCellDef> avatar </th>
      <td mat-cell *matCellDef="let element"> <img src="{{element.avatar}}"> </td>
    </ng-container>

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

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

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator #paginator [pageSizeOptions]="[3, 6]" showFirstLastButtons></mat-paginator>
</div>

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