Как лучше всего подготовить данные для нумерации страниц с настраиваемым диапазоном - PullRequest
Новая
       12

Как лучше всего подготовить данные для нумерации страниц с настраиваемым диапазоном

0 голосов
/ 27 марта 2019

Я создаю простое приложение Angular для отображения данных из Star Wars API . Я хочу создать нумерацию страниц с настраиваемым диапазоном (5,10 или 20 элементов на странице). API возвращает только 10 элементов в одном запросе. Как подготовить данные для отображения, если пользователь может изменить диапазон с 10 до 20 записей на страницу? Должен ли я перебрать API и сохранить все возможные данные, прежде чем я даже отобразить представление? Каков угловой путь в этом случае?

Ответы [ 2 ]

1 голос
/ 27 марта 2019

Следующее имеет место только в том случае, если используемый 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, чтобы получить результаты двух вызовов API для записей 1-20. 

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
            });
      }

    }
1 голос
/ 27 марта 2019

Angular

Вы можете использовать paginators со столом / столом с paginator для достижения этого в Angular.Вы можете проверить paginators / таблицы данных Primeng, ngZorro и Angular материала, которые предоставляют различные встроенные функции.

Оформить различные paginators, которые можно использовать с таблицей- PrimeNg , ngZorro, Угловой материал

Оформление различных таблиц данных с нумерацией страниц - PrimeNg , ngZorro , Угловой материал

API

Если api возвращает 10 записей на запрос, изначально при загрузке таблицы с paginator вы можете запросить записи от 0 до 10, то есть для страницы 1 в paginator.Затем, когда вы нажимаете на страницу 2, вы можете запросить следующие 10 записей, то есть с 11 до 20 и так далее.

Когда вы вызываете api из клиента, вы должны добавить такие детали, как количество записей для извлечения и смещение , из которого вы хотите извлечь данные иполучить данные на основе этих значений.Например, в C # есть опция skip () и take (), где вы можете указать эти два значения

...