Блог

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

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

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

Вы можете увидеть ниже мой файл .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);
}
)
 }
}
  

Я изменил несколько вещей. нет необходимости вызывать API для каждого следующего / предыдущего, если он уже существует, используйте это. нет необходимости писать async в 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] = resu<
        }
    })
}

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