Angular Material分页器异常：数据全部显示在单页问题求助

你的核心问题是表格未绑定到MatTableDataSource实例，导致分页器无法控制表格数据显示，以下是具体修复步骤：

1. 修正HTML表格的数据源绑定 #

将表格的[dataSource]从passwords改为dataSource，同时修正序号列的错误显示：

<div class="mat-elevation-z8">
  <!-- 修改数据源绑定为MatTableDataSource实例 -->
  <table mat-table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="S.No">
      <th mat-header-cell *matHeaderCellDef> S.No. </th>
      <!-- 修正序号列显示为索引+1 -->
      <td mat-cell *matCellDef="let password; let i = index"> {{i + 1}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="Website">
      <th mat-header-cell *matHeaderCellDef> Website </th>
      <td mat-cell *matCellDef="let password"> {{password.website}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="URL">
      <th mat-header-cell *matHeaderCellDef> URL </th>
      <td mat-cell *matCellDef="let password"> {{password.url}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="Password">
      <th mat-header-cell *matHeaderCellDef> Password </th>
      <td mat-cell *matCellDef="let password"> {{password.password}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator showFirstLastButtons [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 50]">
  </mat-paginator>
</div>

2. 优化组件TS代码 #

简化数据加载逻辑，利用AfterViewInit钩子确保分页器正确关联：

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

@Component({
    selector: 'view-passwords',
    templateUrl: './view-passwords.component.html',
    styleUrls: ['./view-passwords.component.css']
})
export class ViewPasswordsComponent implements AfterViewInit {
    url = 'http://localhost:8080/showPass';

    displayedColumns: string[] = ['S.No', 'Website', 'URL', 'Password'];
    dataSource = new MatTableDataSource<any>([]);

    @ViewChild(MatPaginator) paginator!: MatPaginator;

    constructor(private http: HttpClient) {
      this.http.get<any[]>(this.url)
        .subscribe(response => {
          this.dataSource.data = response;
        });
    }

    ngAfterViewInit(): void {
      // 视图初始化完成后绑定分页器
      this.dataSource.paginator = this.paginator;
    }
}

额外检查项 #

确保当前组件所在模块已导入必要的Material模块：

import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  imports: [
    MatTableModule,
    MatPaginatorModule,
    // 其他模块...
  ],
  // 其他配置...
})
export class YourModule { }

原因说明 #

Angular Material分页器依赖MatTableDataSource实现数据切片逻辑，直接绑定原始数组时，表格会渲染全部数据，分页器无法介入数据显示控制。只有通过MatTableDataSource包装数据，才能让分页器正常工作。

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