1

我正在尝试使用 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);
                }

裁判服务.ts：

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

serverSide 分页：我使用 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>

有任何想法吗？提前致谢

4

2 回答 2

0

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

this.size = pageEvent.pageSize;
this.page = pageEvent.pageIndex + 1;
于 2021-04-21T04:25:32.710 回答
0

问题在于你的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.
                }
于 2021-04-21T16:04:23.993 回答