Question

我正在使用angular2和Json。我从Json获取所有用户并在用户索引页面中显示。现在我想要的是最初显示5个用户并加载更多按钮并点击加载更多按钮我想显示接下来的5个用户+前5个用户等等。所以最初在ngOninit中我这样做是为了获取5个用户：

  this.userService.users().subscribe(
  response => {
    if(response['meta'].code == 200) {
      this.users = response['data'];
      this.users = this.users.slice(0, 5);
    }else{
      console.log(response['meta'].message)
    }
  },
  err => {
    console.log('err:', err);
  }
);

这是视图中的加载更多按钮：

  <a class="btn btn-sm btn-primary" (click) = "loadMore()">Load More..</a>

现在我写了方法：

 loadMore(){
  alert("hello");
  // here I am not getting how to fetch the next 5 records + previous records and so on.
 }

那么，有人可以帮助我吗？

Answer 1

您可以存储所有用户，只显示其中的一部分（切片）。 loadMore方法只是创建了这个新切片。

origUsers = response['data'];
i = 5;
this.users = origUsers.slice(0, i);

Answer 2

因为你不应该这样做。

首先，您的服务应该存储所有用户。然后，您应该在保存页面的同时按需返回一部分用户。它应该给出这样的东西：

users : any[] = [];
offset : number = 0;

getUsers() {
  // get your JSON users, store them in users
}

getPaginatedUsers() {
  let tmp = this.users.slice(this.offset, this.offset + 5);
  this.offset += 5;
  return tmp;
}

// In your component

this.userService.getUsers(); // Do this in the on init function
this.users = this.userService.getPaginatedUsers();
loadMore() {
  this.users.push(...this.userService.getPaginatedUsers);
}

// your HTML
<a class="btn btn-sm btn-primary" (click) = "loadMore()">Load More..</a>

在Angular2中加载更多功能

2 个答案: