实现服务器端分页 - Angular 6答案

【问题标题】：Implement server side pagination - Angular 6实现服务器端分页 - Angular 6
【发布时间】：2018-11-26 12:14:26
【问题描述】：

我正在尝试实现服务器端分页，但我不知道该怎么做，我在这里检查了多个答案，但我没有找到可以让它工作的东西。

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

我需要将页面作为参数添加到我的服务吗？以及如何触发下一个值：

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

提前致谢。

【问题讨论】：

标签： angular angular6

【解决方案1】：

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

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

someFunction(pageNumber: number) {
 // next/prev need to be handled here I guess
}

【讨论】：