如何在 Angular 中進行分頁？

Question

我使用 getUsers API 從后端獲取數據，然后使用 mat 表顯示值。 我正在嘗試僅為前端添加分頁器，但這不起作用。 我是否還需要在 allUsers API 中添加分頁器邏輯？ 請幫我編輯下面的代碼以啟用分頁。

所有用戶 API

public List<User> allUserss() {
        Query q = entityManager.createQuery("SELECT u FROM User u");
        return (List<User>) q.getResultList();
    }

typescript

export class GadgetSearchFormComponent implements OnInit {

  users:any;
  
  user:User= new User(0,"","","");
  firstName:string;
  lastName:string;
  gender:string;
 
  ELEMENT_DATA: User[];
 
  displayedColumns: string[]=['firstName' ,'dob' ,'gender',];
  datasource;
  filterForm: FormGroup;
 
 
  constructor(private service: GadgetTracerLogService, private route:ActivatedRoute, private router:Router, private fb:FormBuilder,private dialog: MatDialog) {
    this.filterForm = this.fb.group({
      
       firstName: [''],
       lastName: [''],
      
       gender: ['']
      
 
     });
  }

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

  ngOnInit() {
   
    
    this.datasource=new MatTableDataSource<User>(this.ELEMENT_DATA);
    
    this.filterForm.get("firstName").setValue(null);
    this.filterForm.get("lastName").setValue(null);
    this.filterForm.get("gender").setValue(null);
    
      this.getUsers();
    
  }
  
  
 public getUsers(){
 
  
  let resp=this.service.getUsers();
  
        resp.subscribe(report=>this.datasource=report as User[]);      
 }

}

html

 <mat-card class="data-card">
      <mat-card-content>
        <table id="DataPreview" mat-table [dataSource]="datasource" multiTemplateDataRows class="mat-elevation-z8" width="100%">
         
    <ng-container matColumnDef="firstName">
      <th mat-header-cell *matHeaderCellDef> Full Name </th>
      <td mat-cell *matCellDef="let element"> {{element.firstName}}  {{element.lastName}} </td>
    </ng-container>
  
    <!-- Name Column -->
    <ng-container matColumnDef="lastName">
      <th mat-header-cell *matHeaderCellDef> Last Name </th>
      <td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
    </ng-container>
  

    <!-- Symbol Column -->
    <ng-container matColumnDef="gender">
      <th mat-header-cell *matHeaderCellDef> Gender </th>
      <td mat-cell *matCellDef="let element"> {{element.gender}} </td>
    </ng-container>
    
   
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"  (click)="updateSymptomCodeConfigDialog(row)"></tr>
   
   
  
  <mat-error *ngIf="searchResultMessage">{{searchResultMessage}}</mat-error>

</table>

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

</mat-card-content>
</mat-card>

Answer 1

您沒有將分頁器與數據源連接起來

將其替換為 TS 中的 viewChild

@ViewChild('paginator') paginator: MatPaginator;

在 ngOnInIt 中初始化 dataSource 后，您必須將 dataSource 與分頁器引用連接起來，例如：

 ngOnInit() {         
 this.datasource=new MatTableDataSource<User>(this.ELEMENT_DATA);
 this.datasource.paginator = this.paginator;
 }

只需進行這些更改，如果有任何疑問，請隨時問我。

Answer 2

在訂閱中，您創建數據源並分配分頁，但請記住，您需要創建一個 MatTableDataSource

resp.subscribe(report=>{
  //see that teh dataSource is a "MatTableDataSource", not the array 
  this.datasource=new MatTableDataSource<User>(report);
  this.dataSource.paginator = this.paginator;
});