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数组应具有以下内容：

<script>
  $(document).ready(function(){
    $('.modal').modal();
    $('#addNote').click(function() {
      $('.modal').modal('open');
    });
  });
</script>

您的打字稿将具有以下内容：

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

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

然后像这样在您的html中使用它：

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

参考链接：https://github.com/michaelbromley/ngx-pagination＃服务器端分页

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

1 个答案: