Angular 材料分页器未按预期工作

Question

Happy new year

I am learning angular and I used angular material paginator on my table which gets data from an API. It displays the number of rows and entries correctly on bottom, but all the data is still displayed in single page. I have searched and tried a lot of solutions on the inte.net but in vain.

I am using a view password component which is displayed in router-outlet.

Component HTML

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="passwords">

    <!-- Position Column -->
    <ng-container matColumnDef="S.No">
      <th mat-header-cell *matHeaderCellDef> S.No. </th>
      <td mat-cell *matCellDef="let password"> {{password.website}} </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>

Component ts

import { HttpClient } from '@angular/common/http';
import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatTableDataSourcePaginator } 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{

    url:any= 'http://localhost:8080/showPass';

    passwords:any;

    displayedColumns: string[] = ['S.No', 'Website', 'URL', 'Password'];
    dataSource: any;

    @ViewChild(MatPaginator, {static:false}) paginator !: MatPaginator;

    constructor(private http: HttpClient, private cdr:ChangeDetectorRef){
      this.http.get(this.url)
        .subscribe(Response=>{
          (this.passwords=Response);
          this.cdr.detectChanges();
          this.dataSource= new MatTableDataSource(this.passwords);
          this.dataSource.paginator = this.paginator;
          //console.log(this.dataSource.paginator)
        })
    }

My localhost my webpage

The bottom paginator is working fine as I can see, but the table displays all data in single page, despite the paginator showing 1-5. Am I doing anything wrong?

Angular material paginator displaying data in multiple pages, but it displays all data in single page

Answer 1

I refactored and simplified your typescript-code a bit. I think one main-problem was that you pass passwords instead of dataSource to the HTML. Can you try if the following code works?

Component TS :

@ViewChild(MatPaginator)
paginator!: MatPaginator;

url = 'http://localhost:8080/showPass';

displayedColumns: string[] = ['S.No', 'Website', 'URL', 'Password'];
dataSource!: MatTableDataSource<User>;

constructor(private http: HttpClient){
    this.http.get(this.url).subscribe(res=>{
        this.dataSource = new MatTableDataSource(res);
        this.dataSource.paginator = this.paginator;
    })
}

Modification needed in Component HTML :

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