问Google样式分页

EN

import { Component } from '@angular/core';
import { WebService } from './web.service';
import { AuthService } from './auth.service';

@Component({
selector: 'hotels',
templateUrl: './hotels.component.html',
styleUrls: ['./hotels.component.css']
})
export class HotelsComponent {

constructor(private webService: WebService, private authService: AuthService) {}

    ngOnInit() {
        if (sessionStorage.start) {
            this.start = sessionStorage.start;
            } 
        this.webService.getHotels(this.start);
        }

        nextPage() {
            this.start = Number(this.start) + 5;
            sessionStorage.start = Number(this.start);
            this.webService.getHotels(this.start);
           }
           previousPage() {
            if (this.start > 0) {
            this.start = Number(this.start) - 5;
            sessionStorage.start = Number(this.start);
            this.webService.getHotels(this.start);
            }
           }

hotel_list;    
start = 0;



}

<div class="container"  style="margin-top:100px;">
    <div class="row">
        <div class="col-sm-12">
            <div *ngFor="let hotel of webService.hotel_list | async">
                <div class="card text-white bg-primary mb-3" 
[routerLink]="['/hotels', hotel._id]" style="cursor: pointer">
                    <div class="card-header">
                        {{ hotel.Name }}
                    </div>
                    <div class="card-body">
                        This hotel is based in
                        {{ hotel.Location }}
                    </div>
                    <div class="card-footer">
                        {{ hotel.review_count }}
                        reviews available
                    </div>
                </div>
            </div>
        </div> <!-- col -->
    </div> <!-- row -->
    <div class="row">
        <div class="col-sm-6">
            <button (click)="previousPage()">Previous</button>
        </div>
        <div class="col-sm-6 text-right">
            <button (click)="nextPage()">Next</button>
        </div>
    </div>

</div> <!-- container -->

import { Http, URLSearchParams } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/toPromise';
import { Subject } from 'rxjs/Rx';

@Injectable()
export class WebService {

hotelID;

private hotels_private_list = [];
private hotelsSubject = new Subject();
hotel_list = this.hotelsSubject.asObservable();

private hotel_private_list = [];
private hotelSubject = new Subject();
hotel = this.hotelSubject.asObservable();

private reviews_private_list = [];
private reviewsSubject = new Subject();
reviews = this.reviewsSubject.asObservable();

url: string = 'http://localhost:3000/api/hotels/';
hotelsArray = [];

constructor(private http: Http) { 


}

getHotels(start) {
    return this.http.get(
        'http://localhost:3000/api/hotels?start=' + start)
        .subscribe(response => {
            this.hotels_private_list = response.json();
            this.hotelsSubject.next(this.hotels_private_list);
        })
}



getHotel(id: string) {
    return this.http.get(
        'http://localhost:3000/api/hotels/' + id)
        .subscribe(response => {
            this.hotel_private_list = [];
            this.hotel_private_list.push(response.json());
            this.hotelSubject.next(this.hotel_private_list);
            this.hotelID = id;
        })
}

getReviews(id) {
    this.http.get(
        'http://localhost:3000/api/hotels/' + id + '/reviews')
        .subscribe(
            response => {
                this.reviews_private_list = response.json();
                this.reviewsSubject.next(
                    this.reviews_private_list);

            }
        )
}

postReview(review) {
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('username', review.name);
    urlSearchParams.append('text', review.review);
    urlSearchParams.append('stars', review.stars);

    this.http.post(
    "http://localhost:3000/api/hotels/" +
    review.hotelID + "/reviews",
    urlSearchParams)
    .subscribe(
    response => {
    this.getReviews(review.hotelID);
    }
    )
}