实现服务器端分页-角6

Question

我正在尝试实现服务器端分页，但我无法获得如何实现它，我在这里检查了多个答案，只是找不到可以让它工作的东西。

我正在尝试使用ngx分页：https://github.com/michaelbromley/ngx-pagination#readme。

这是我昂首阔步的回答：

{
  "count": 34,
  "next": "http://0.0.0.0:8000/api/transaction/history?page=2",
  "previous": null,
  "results": [...]
}

我现在正在研究如何实现这一点，我知道我需要导航到下一页和上一页，但不确定如何实现。现在，我的组件就是这样查找的：

transactionsModel: TransactionModel[] = [];
  page = 1;
  total: number;

  constructor(private billingService: BillingHistoryService, private router: Router) { }

  ngOnInit() {
    this.getAllTransactions();
  }

  getAllTransactions() {
    this.billingService.getTransactions(this.page)
        .subscribe((response: any) => {
          this.transactionsModel = response.results;
          this.total = response.results.length;
        }, (error) => {

        });
  }

  someFunction(e) {
   // next/prev need to be handled here I guess
  }

  next() {
      this.page++;
      this.router.navigate(['/billing-history'], {queryParams: {page: this.page}});
  }

    prev() {
        this.page--;
        this.router.navigate(['/billing-history'], {queryParams: {page: this.page}});
    }

在我的服务中，我只拥有：

private getTransactionsUrl = environment.apiUrl + '/transaction/history';

  constructor(private http: HttpRequestService) { }

  getTransactions() {
    return this.http.get(this.getTransactionsUrl);
  }

是否需要将页面作为param添加到我的服务中？中的下一个值如何触发：

    <pagination-controls (pageChange)="someFunction($event)" id="billing-items"></pagination-controls>

提前谢谢。

Answer 1

当有人使用pagination-controls导航到下一页或上一页时，将触发pageChange输出，其中$event等于新的页码。看起来，您需要实现someFunction($event)，以便它接收一个参数，即所需的页码，并使用该参数从服务器获取所有必要的数据，并更新任何必要的变量。

文档中的服务器分页示例用一个示例http://michaelbromley.github.io/ngx-pagination/#/server-paging来描述所有这些。不知道你还需要什么。您甚至似乎承认这是您需要在粘贴代码中的注释中所做的事情。

someFunction(pageNumber: number) { // next/prev需要在这里处理，我猜}