Question

有必要通过连接的服务器进行分页。 Here是这种细分为服务器页面的示例。但是我已经浪费了一个小时，不知道该怎么做。当前仅显示前10条记录。

不显示分页。有人可以解释如何做吗？

服务：

page: number = 1;

getPosts(page?: number): Observable<Post[]>{
    return this._authService.get(`posts?page=${page}`)
    .map((res: Response) => <Post[]>res.json())
        .do(res => {
            this.page = page;
        })
}

ts：

  page: number;

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

  getPosts(page: number) {
    this.page = page;
    this.servPost.getPosts(page).subscribe(
      (data: Post[]) => {
        this.posts = data; 
    });
  }

html：

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

这是我的 JSON 的样子：

{
  "data":[
               {"id":234,"name":"Text","raw_rnum_":1},
               {"id":341,"name":"Text2","raw_rnum_":2},
               {"id":347,"name":"Text3","raw_rnum_":3},
               {"id":435,"name":"Text4","raw_rnum_":4},
               {"id":456,"name":"Text5","raw_rnum_":5},
               {"id":523,"name":"Text6","raw_rnum_":6},
               {"id":578,"name":"Text7","raw_rnum_":7},
               {"id":592,"name":"Tex8","raw_rnum_":8},
               {"id":673,"name":"Text9","raw_rnum_":9},
               {"id":690,"name":"Text10","raw_rnum_":10}
             ],
  "meta":{"total":3242}
}

Answer 1

您在totalItems管道上绑定了错误的值，请尝试如下更改代码，

totalItems:posts.meta.total

如何对服务器页面进行细分？

1 个答案: