Как снять ограничение вывода информации с помощью нумерации страниц? - PullRequest
Новая
       41

Как снять ограничение вывода информации с помощью нумерации страниц?

0 голосов
/ 28 августа 2018

Я использую Ngx-пагинацию. И количество данных отображается столько, сколько я установил в «totalItems». То есть, если я укажу больше данных, чем в JSON, будут добавлены лишние пустые страницы. И это не хорошо. Как это сделать, автоматически определить объем данных, которые нужно отобразить в нумерации страниц?

HTML: 

<div *ngFor="let post of posts | paginate: {itemsPerPage: 10, currentPage:page, id: 'server', totalItems: total}"> 
....
</div>
<div class="pagination-block " style="justify-content: center">
  <pagination-controls (pageChange)="getPosts($event)" id="server">
  </pagination-controls>
</div>

ц 

 page: number;
  total: number;

  ngOnInit() {
    this.getPosts(this.page);
  }

  getPosts(page: number) {
    this.page = page;
    this.total = 3256;
    this.servPost.getPosts(page).subscribe(
      posts => this.posts = posts
    );
  }

1 Ответ

0 голосов
/ 28 августа 2018

Согласно документации по ngx-нумерации, ваш массив get с длиной массива должен выглядеть примерно так: 

Use this :
{
  count: 14453,
  data: [
    { /* item 1 */ },
    { /* item 2 */ },
    { /* item 3 */ },
    { /*   ...  */ },
    { /* item 10 */ }
  ]
}

Instead of :
posts: [
  { /* item 1 */ },
  { /* item 2 */ },
  { /* item 3 */ },
  { /*   ...  */ },
  { /* item 10 */ }
]

и ваша машинопись будет выглядеть примерно так: 

 getPosts(page: number) {
    this.page = page;
    // this.total = 3256;
    this.servPost.getPosts(page).subscribe(
      posts => this.posts = posts
    );
  }

Затем используйте это в своем HTML, как это: 

*ngFor="let item of posts?.data | paginate: { itemsPerPage: 10, currentPage: page, totalItems: posts?.count }"

Ссылка: https://github.com/michaelbromley/ngx-pagination # Пейджинг на стороне сервера

...