Angular Material HTML表格分页失效：按钮无法点击导航求助

以下是你的代码中导致分页功能失效的核心问题及修正方案：

核心问题分析 #

1. API数据解析错误：reqres.in的/api/users接口返回嵌套结构，你直接将整个响应赋值给users，实际用户数组在响应的data字段中。
2. 生命周期钩子错误：不存在ngAfterInit钩子，应使用ngAfterViewInit；且API请求是异步的，钩子执行时数据还未加载完成，导致dataSource初始化时无数据。
3. 表格数据源绑定缺失：HTML中的<table>标签未添加mat-table指令并绑定dataSource，Angular Material无法识别表格与数据源的关联。
4. 分页器配置错误：mat-paginator的length硬编码为2，与实际数据量不符，且未设置默认每页显示条数。
5. 语法错误：HTML中mat-row的指令存在多余引号，导致渲染异常。

修正后的代码 #

users.component.ts #

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';

// 定义用户类型，提升类型安全性
interface User {
  id: number;
  avatar: string;
  first_name: string;
  last_name: string;
}

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit, AfterViewInit {
  users: User[] = [];
  dataSource: MatTableDataSource<User>;
  @ViewChild('paginator') paginator!: MatPaginator;
  displayColumn: string[] = ["ID", "Avatar", "First Name", "Last Name"];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<{data: User[]}>("https://reqres.in/api/users").subscribe((response) => {
      this.users = response.data;
      // 数据加载完成后初始化数据源
      this.dataSource = new MatTableDataSource(this.users);
      // 确保分页器视图初始化完成后绑定
      setTimeout(() => {
        this.dataSource.paginator = this.paginator;
      });
    });
  }

  ngAfterViewInit() {
    // 若数据已加载，补充绑定分页器
    if (this.dataSource) {
      this.dataSource.paginator = this.paginator;
    }
  }
}

users.component.html #

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <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" style="width: 50px; height: 50px;"> </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="displayColumn"></tr>
  <tr mat-row *matRowDef="let row; columns: displayColumn;"></tr>
</table>

<mat-paginator class="mat-elevation-z8" 
               #paginator 
               [length]="dataSource?.data.length || 0" 
               [pageSize]="3"
               [pageSizeOptions]="[3,6]">
</mat-paginator>

关键修改说明 #

• 数据解析：将API响应的response.data赋值给users，获取正确的用户数组。
• 异步处理：在API请求的subscribe回调中初始化dataSource，确保数据存在；用setTimeout确保分页器视图初始化完成后再绑定。
• 表格指令绑定：给<table>添加mat-table指令并绑定[dataSource]="dataSource"，建立表格与数据源的关联。
• 分页器配置：动态绑定length为数据源实际长度，设置[pageSize]="3"满足每页显示3行的需求。
• 语法修复：移除mat-row指令中多余的引号，确保模板渲染正常。

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