Загрузка данных, когда пользователь переходит на следующую страницу - PullRequest
Новая
       25

Загрузка данных, когда пользователь переходит на следующую страницу

0 голосов
/ 03 мая 2019

Я получаю доступ к конечной точке API, которая получает> 1000 объектов данных и возвращает их пользователю.

Я не думаю, что это эффективно, так как только 30 объектов видны одновременно.

Есть ли способ загрузить эти объекты более эффективно (т. Е. 30 за раз), тем более, что я интегрировал его с ngx-datatable .

Мой API позволяет это сделать ... просто нужно добавить следующие параметры в URL:

Результаты с разбивкой по страницам (установите page = $ {pageNumber} и limit = $ {maxResultsOnPage}), например Чтобы ограничить результаты до 5 проповедей на странице и получите 2-ую страницу: 

 curl --request GET \
    --header 'content-type: application/json' \
    --url 'http://localhost:8080/sermon?limit=5&page=2'

sermon.component.ts 

  public getAllSermons() {
    this.sermonSubscription = this.apiService.getAllSermons().subscribe((data: Array<object>) => {
      this.sermons = data;
      this.totalCount = Object.keys(this.sermons).length;
      this.logger.debug(`${data.length} sermons loaded`);
      this.isSermonsLoaded = true;
    });
  }

sermon.component.html 

        <ngx-datatable class="material fullscreen" [rows]="sermons" [loadingIndicator]="loadingIndicator"
          [selected]="selected" [selectionType]="'single'" [columnMode]="'force'" [headerHeight]="50"
          [footerHeight]="50" [rowHeight]="'auto'" [limit]="30" (select)='onSelect($event)'>
          <ngx-datatable-column name="Date" [width]="80"></ngx-datatable-column>
          <ngx-datatable-column name="Speaker" [width]="200"></ngx-datatable-column>
          <ngx-datatable-column name="Name" [width]="600"></ngx-datatable-column>
        </ngx-datatable>

api.service.ts 

  public getAllSermons() {
    return this.httpClient.get(`${this.apiUrl}/sermon?orderBy=date&sortAscending=false`).pipe(map((data: any) => data.data)
    );
  }

1 Ответ

0 голосов
/ 03 мая 2019

С помощью ngx-datatable вы можете установить для входа externalPaging значение true и прослушать событие page.

Вот пример из документации: https://github.com/swimlane/ngx-datatable/blob/master/demo/paging/paging-server.component.ts

...