Question

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

Answer 1

角度

您可以将paginators与带paginator的表一起使用，以在Angular中实现此目的。您可以检出Primeng，ngZorro和Angular材质的分页器/数据表，它们提供了多种内置功能。</ p>

检出可与表PrimeNg，ngZorro，Angular Material一起使用的各种分页器

通过分页签出各种数据表-PrimeNg，ngZorro，Angular Material

API

如果api每个请求返回10条记录，则最初在加载带有分页器的表时，您可以请求0到10条记录，即分页器中第1页的记录。然后，当您单击第2页时，您可以请求下10条记录，即11至20，依此类推。

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

Answer 2

仅当消耗的api在单个请求中传递10条记录时，才是以下情况。否则，您只需传递记录数并偏移到api即可获得所需的结果。

将change标记上的select事件处理程序用作

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

使用forkjoin中的rxjs获取记录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
            });
      }

    }

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

2 个答案: