使用自定义范围为分页准备数据的最佳方法是什么

Question

我正在构建简单的 Angular 应用程序来显示来自 Star Wars API 的数据。我想使用自定义范围（每页 5,10 或 20 个元素）创建分页。 API 在单个请求中仅返回 10 个元素，那么如果用户可以将范围从默认的每页 10 条更改为 20 条记录，如何准备要显示的数据？我应该在显示视图之前遍历 API 并存储所有可能的数据吗？在这种情况下，Angular 方式是什么？

Answer 1

仅当使用的 api 在单个请求中提供 10 条记录时，才会出现以下情况。否则，您只需将记录数和偏移量传递给 api 即可获得所需的结果。

在select 标签上使用change 事件处理程序

<select (change)="fetchRecords()" [(ngModel)]="selectedOption" name="gender">
      <option *ngFor="let option of selectOptions" [value]="option">
        {{option}}
      </option>
</select>

使用rxjs 中的forkjoin 获取记录1-20 的2 次api 调用的结果。

public selectOptions = [
    "5",
    "10",
    "20"
  ];    

fetchRecords() {
      console.log(this.selectedOption);
      if(this.selectedOption == "5") {
        this.http.get(requestUrl1).subscribe(data=> {
          // fetch 1-10 records, but put 1-5 in the array to show
        });
      }
      if(this.selectedOption == "10") {
        this.http.get(requestUrl1).subscribe(data=> {
          // fetch 1-10 records, put all 10 records in array to show
        });
      }
      if(this.selectedOption == "20") {
      let response1 = this.http.get(requestUrl1); // 1-10 offset
      let response2 = this.http.get(requestUrl2); // 11-20 offset
      forkJoin([response1, response2, response3]).subscribe(responseList => {
                this.responseData1 = responseList[0];
                this.responseData2 = responseList[1];
                // concate all the 20 records and put in the array to show
            });
      }

    }

Answer 2

角度

您可以使用带有分页器的表格/表格的分页器来在 Angular 中实现这一点。您可以查看 Primeng、ngZorro 和 Angular 材料的分页器/数据表，这些材料提供了各种内置功能。

查看可与表格一起使用的各种分页器-PrimeNg、ngZorro、Angular Material

使用分页检查各种数据表 - PrimeNg、ngZorro、Angular Material

API

如果 api 每个请求返回 10 条记录，最初在加载带有分页器的表时，您可以请求从 0 到 10 的记录，即分页器中的第 1 页。然后当您点击第 2 页时，您可以请求接下来的 10 条记录，即 11 到 20 等等。

当您从客户端调用 api 时，您应该添加诸如 数字之类的详细信息 要获取的记录数和要从中获取的偏移量 数据并根据这些值获取数据。例如在 C# 中， 有一个名为 skip() 和 take() 的选项，您可以在其中提供这些选项 两个值