如何在 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;
});