Angular - ngx-Pagination 没有按预期工作

Question

在 Angular-14 中，我使用 ngx-bootstrap-pagination 以 ASP.NET Core-6 作为后端来实现服务器端分页。

服务：

getPaymentStatus(): Observable<IPaymentStatus[]> {
  return this.http.get<IPaymentStatus[]>(this.baseUrl + '/payments-status');
}

我从后端得到了这个 JSON 响应：

{
    "data": {
        "pageItems": [
            {
                "id": "2b0ab0db-523f-4b5f-837e-3f24ba6e0325",
                "dueDate": "2025-06-12T00:00:00",
                "narration": null,
                "paymentStatus": 0
            },
            ....
        ],
        "pageSize": 10,
        "currentPage": 1,
        "numberOfPages": 9,
        "totalRecord": 81
    },
    "successful": true,
    "message": "All data retrieved successfully",
    "statusCode": 200
}

所以，在打字稿中，我得到了这个：

组件.ts：

  page: number = 1;
  pageSize!: number;
  currentPage!: number;
  numberOfPages!: number;
  totalRecords!: number;
  pageSizes = [10, 20, 50, 100];

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

  getRequestParams(page: number, pageSize: number): any {
    let params: any = {};
    if (page) {
      params[`page`] = page - 1;
    }
    if (pageSize) {
      params[`size`] = pageSize;
    }
    return params;
  }

  handlePageChange(event: number): void {
    this.page = event;
    this.loadAllPayments();
  }

  handlePageSizeChange(event: any): void {
    this.pageSize = event.target.value;
    this.page = 1;
    this.loadAllPayments();
  }

  onTableDataChange(event: any) {
    this.currentPage = event;
    this.loadAllPayments();
  }
  onTableSizeChange(event: any): void {
    this.pageSize = event.target.value;
    this.currentPage = 1;
    this.loadAllPayments();
  }

  loadAllPayments() {
    this.dataService.getPaymentStatus().subscribe({
      next: (res: any) => {
        this.allPaymentList = res.data.pageItems;
        this.totalRecords = res.data.totalRecord;
        this.currentPage = res.data.currentPage;
        this.pageSize = res.data.pageSize;
      },
      error: (error) => {
        this.toastr.error(error.message);
        this.isLoading = false;
      }
    })
  }

组件.html：

      <div class="card-body">
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <th style="width: 10px">#</th>
              <th>Due Date</th>
              <th>Narration</th>
              <th>Payment Status</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody *ngIf="allPaymentList != undefined">
            <tr *ngFor="let row of allPaymentList
            | paginate : {
              itemsPerPage: pageSize,
              currentPage: currentPage,
              totalItems: totalRecords
            }; let i = index;">
              <td>{{ i + 1 }}.</td>
              <td>{{ row?.dueDate | date: 'dd-MM-yyyy' || 'N/A' }}</td>
              <td>{{ row?.narration || 'N/A' }}</td>
              <td>{{ row?.paymentStatus || 'N/A' }}</td>
              <td>
                <a class="btn btn-primary btn-sm" (click)="viewPaymentData(paymentDetail, row)">
                  <i class="fa fa-eye" aria-hidden="true"></i> View
                </a>&nbsp;
              </td>
            </tr>
            <tr *ngIf="allPaymentList.length ==0;">
              <td colspan="9" class="text-center">
                <span class="align-center">No Data Found!</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card-footer clearfix">
        <div class="row">
          <div class="col-md-6">
            <pagination-controls
            previousLabel="Prev"
            nextLabel="Next"
            [responsive]="true"
            (pageChange)="onTableDataChange($event)"
          >
          </pagination-controls>
          </div>
          <div class="col-md-4">
            Items Per Page:
            <select (change)="onTableSizeChange($event)">
              <option *ngFor="let size of pageSizes" [ngValue]="size">
                {{ size }}
              </option>
            </select>
          </div>
        </div>
      </div>

console.log(this.allPaymentList) 给出：

{
    "data": {
        "pageItems": [
            {
                "id": "2b0ab0db-523f-4b5f-837e-3f24ba6e0325",
                "dueDate": "2025-06-12T00:00:00",
                "narration": null,
                "paymentStatus": 0
            },
            {
                "id": "d76b297a-70b5-4a29-82e1-937f6710cbb2",
                "dueDate": "2025-03-12T00:00:00",
                "narration": null,
                "paymentStatus": 0
            },
            {
                "id": "ef94ac6e-e18e-474f-961b-3b995ce7b4a7",
                "dueDate": "2024-12-12T00:00:00",
                "narration": null,
                "paymentStatus": 0,
            },
            {
                "id": "a4b35e3b-0bb7-4115-aee7-858259703b62",
                "dueDate": "2023-03-12T00:00:00",
                "narration": null,
                "paymentStatus": 0
            }
             ...
        ],
        "pageSize": 10,
        "currentPage": 1,
        "numberOfPages": 9,
        "totalRecord": 81,
        "previousPage": 0
    },
    "successful": true,
    "message": "All payments retrieved successfully",
    "statusCode": 200
}

分页如下图：

哪个是正确的。

但是我遇到的问题是，当我单击每个数字 (1,2,3,4 ..9) 时，它会保留在同一页面上，而不是导航到下一页。 此外，每页项目不会将我带到页面。

我该如何纠正所有这些？

谢谢

Answer 1

您忘记告诉 API 根据您的分页输入格式返回正确的数据。

这是您可以做的。

在您的服务中，您需要添加更多要发送的信息（此数据必须由您的后端团队提供。

所以，从这

getPaymentStatus(): Observable<IPaymentStatus[]> {
  return this.http.get<IPaymentStatus[]>(this.baseUrl + '/payments-status');
}

将其更改为：

getPaymentStatus(page: number = 1, perPage: number = 10): Observable<IPaymentStatus[]> {
  return this.http.get<IPaymentStatus[]>(this.baseUrl + `/payments-status?page=${page}&perPage=${perPage}`);
}

注意：密钥page 和perPage 必须由您的后端团队提供。

---

现在，在您的组件中，您可以发出带有更多输入的请求this.dataService.getPaymentStatus($page, $perPage)

喜欢：

// Example One: page 1, 10 per page
this.dataService.getPaymentStatus(1).subscribe((data) => {
    console.log({data});
});


// Example Two: page 2, 20 per page
this.dataService.getPaymentStatus(2, 20).subscribe((data) => {
    console.log({data});
});

等等...