Question

我正在尝试实现服务器端分页，但是我无法做到这一点，我在这里检查了多个答案，但是我没有找到可以使之起作用的东西。

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

谢谢。

Answer 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
}

实施服务器端分页-Angular 6

1 个答案: