Angular2のその他の機能をロードする

Question

私はangular2とJsonを使用しています。私はJsonからすべてのユーザーを取得し、そのユーザーのインデックスページに表示しています。今私が欲しいのは、最初に5人のユーザーを表示し、さらにボタンをロードし、さらにボタンをクリックすることです。次の5人のユーザー+前の5人のユーザーなどを表示します。

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

ので：今、私はこの方法を書いた

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

：これは、ビュー内の負荷より多くのボタンがある

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

：だから、最初はngOninitで私は5人のユーザーを取得するために、次のようにやっています誰も助けてくれませんか？

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>