当后端（NodeJS、TypeORM）中定义了限制时，如何在前端（Angular）中使用分页？

Question

我是 Angular 和 NodeJS 的新手。我想在前端列表中使用分页，我限制了后端方法中的条目，并且它工作正常。这。问题是我无法在我的前端代码中使用它，并且很困惑如何实现相同的目标。

我的后端代码 -->

//get all staff data
    static async getStaffData(req: Request, res: Response): Promise<void> {
        try {
          console.log("---------------------------")
          const count = await staffRepository.count()
          console.log(count)
          console.log("---------------------------")
          //typecasting
          const page : number = parseInt(req.query.page as string) || 1; // Page number
          const pageSize : number = parseInt(req.query.pageSize as string, 10) || 10; // Number of items per page
          console.log(page)
         // const limit : number = 3
          // offset formula , here skip
          const skip = (page - 1) * pageSize;

       const allStaffData = await staffRepository.createQueryBuilder('staff')
       .skip(skip)
       .take(pageSize)
       .getMany();
//apply filter for isActive nd inactive 
      res.status(200).json({
        data : allStaffData});
 //      res.status(200).json({ data :allStaffData });
     } catch (error) {
       console.error('Error:', error);
       // Handle errors and send an appropriate response
       res.status(500).json({ error: 'Internal Server Error' });  
     }
    }

我的前端代码 -->

// list-staff.component.ts

// Listing all Staff here --> 

 currentPage = 1; 
  pageSizeOptions: number[] = [5, 10, 20];
  postPerPage = 2

ngOnInit(){
    // automatically lists the staff
    this.listStaff()
    this.staffService.getAllStaffData(this.postPerPage, this.currentPage); 
 
  }

  listStaff(){
    try{
    this.staffService.getAllStaffData(this.postPerPage, 1).subscribe((data : Staff[]) =>{
      console.log(data)
      if(data!=null){
         var resultBody = data
         if (resultBody) {
          this.dataSource = resultBody
          // this.dataSource.paginator = this.paginator;
         }
      } else{
        console.log("error in fecthing the staff")
       }
    })
   }catch(err){
    console.log("Error in get method :",err)
   }
  }

//list-staff.component.html -->

 <!-- Paginator -->
  <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons >
  </mat-paginator>

我的员工服务代码 -->

// staff.service.ts -->

// Read Staff Data Client Request-->
getAllStaffData(pagesize: number, currentPage: number) : Observable<Staff[]>{ 
const queryParams = `?pagesize=${pagesize}&currentPage=${currentPage}`
        return this.http.get<Staff[]>(this.getAllStaffURL+queryParams)
        .pipe( map((response : any) => {
                return response.data }) )
    }

Answer 1

在后端，您应该创建一个函数来计算查询返回的结果总数并将其包含在您的响应中。在前端，您将依靠这个结果总数来实现分页。