我的角度分页有问题，特别是页面大小

如何解决我的角度分页有问题，特别是页面大小

我正在尝试使用 mat-paginator 进行分页，但是当我单击并更改页面大小时没有任何反应，pageSize(limit) 仍然与服务器端限制相同，没有任何变化

裁判列表.ts：

 export class RefereeListingComponent implements OnInit,AfterViewInit{

  displayedColumns: string[] = ['fullName','dateOfBirth','placeOfResident','email','phoneNumber','refereeType','action'];
  cellColors = ['#e28743','#b8b5ff','#7eca9c','#f5c0c0','#897853'];

  referees: Referee[] = [];


  length = 40;
  page = 1;
  size = 10;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild('input') input: ElementRef;

  constructor(private refereeService: RefereeService,private httpClient: HttpClient,private router: Router,private route: ActivatedRoute,private snackBar: MatSnackBar) {
  }

  ngOnInit(): void {
    this.populateReferees();
  }

  ngAfterViewInit(): void {
  }

  getRequestParams(page: number,pageSize: number): any {
    let params: any = {};

    if(page) {
      params[`page`] = page - 1;
    }

    if(pageSize) {
      params[`size`] = pageSize ;
    }

    return params;

  }

  btnHandler() {
    this.router.navigateByUrl('frmhb/referees/new')

  }

  populateReferees() {
    const params = this.getRequestParams(this.page,this.size)
    this.refereeService.getReferees(params).subscribe((data: any) => {
        const { referees,totalReferees,limit} = data;
        this.referees = referees;
        this.length = totalReferees;
        this.size = limit;
        console.log(data);
      },error => {
        this.errorHandler('error','حدث خطأ ما أثناء إحضار قائمة الحكام')
      });


  }
            
             onPaginate(pageEvent: PageEvent) {
                  this.size = +pageEvent.pageSize;
                  this.page = +pageEvent.pageIndex + 1;
                  this.refereeService.getReferees(this.params);
                }

refereeService.ts :

getReferees(params: any): Observable<Referee[]> {
return this.httpClient.get<Referee[]>(`${BASE_URL}/referees`,{params}); }

服务器端分页： 我正在使用 mongoose-paginate-v2 在节点 js 的服务器端进行分页

 exports.findAll = (req,res) => {
        // const fullName = req.query.fullName;
        const { page,size,fullName} = req.body
        const condition = fullName ? { fullName: { $regex: new RegExp(fullName),$options: "i" } } : {};
    
    
        const { limit,offset } = getPagination(page,size);
    
        Referee.paginate(condition,{ limit,offset})
            .then(data => {
                res.send({
                    totalReferees: data.totalDocs,referees: data.docs,limit: data.limit,totalPages: data.totalPages,currentPage: data.page - 1,});
            })
            .catch(err => {
                res.status(500).send({
                    message:
                        err.message || "Some error occurred while retrieving Referees."
                });
            });
    };

裁判列表.html：

<mat-paginator pageIndex = "1" [length]="length"
               [pageSize]="size"
               [pageSizeOptions]="[5,10,25,100]"
               (page)="onPaginate($event)"></mat-paginator>

有什么想法吗？提前致谢

解决方法

如果分页无法正常工作，则使用新值增加 pageSize 和页面索引可能是您的问题。 请尝试直接分配页面大小和页面索引。

this.size = pageEvent.pageSize;
this.page = pageEvent.pageIndex + 1;

,

问题在于您的 onPaginate 方法。您正在更新页面索引并调用 getReferees() 方法。但是你并没有订阅它的结果。因此，您的页面没有更新。

将调用 getReferees() 替换为 this.populateReferees()

 onPaginate(pageEvent: PageEvent) {
                  this.size = +pageEvent.pageSize;
                  this.page = +pageEvent.pageIndex + 1;
                  //this.refereeService.getReferees(this.params);//This call was not subscribed,hence bindings and data were not getting updated.
                  this.populateReferees(); //This will call the API and populate the result with new response.
                }