angular - 如何使用分页消除输出信息的限制？

Question

我使用 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> 

ts：

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

Answer 1

根据 ngx-pagination 文档，您的数组长度的 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 #Server-Side Paging