Убедитесь, что nextPage не работает, если в конце набора данных

Question

У меня есть система нумерации страниц, которая позволяет мне перейти на следующую и предыдущую страницы.

Я хочу иметь возможность реализовать это, если у пользователя заканчиваются данные для возврата на страницу, тогда они должны быть перенаправлены обратно на первую страницу.

Может кто-нибудь помочь мне сделать это?спасибо

Ниже вы можете увидеть мой файл .ts и файл .html.

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;



 }

HTML

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

Answer 1

Я изменил несколько вещей.нет необходимости вызывать API для каждого следующего / пред, если уже существует, используйте это.нет необходимости писать асинхронно в HTML.

СЕРВИС

getHotels(start) {
    return this.http.get('http://localhost:3000/api/hotels?start=' + start);
}

HTML

<div *ngFor="let hotel of pages[start]">

КОМПОНЕНТ

pages = {};

ngOnInit() {this.getdata(this.start)}

getdata(start) {
    if (pages[start]) return; //don't do anything
    this.pages[start] = [];
    this.webService.getHotels(start).subscribe(response => {
        const result = response.json();
        if(!result){ // data does not exist go to first page
          this.start = 0;  
        }else{
          pages[start] = result;
        }
    })
}

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