Angular 6 pagination с ng-бутстрапом выбранных данных из Api

Question

Может кто-нибудь помочь мне исправить мой код для нумерации страниц?

Есть услуга:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable ()

export class MovieRequestService {
  private moviesList = `https://yts.am/api/v2/list_movies.json`;
  private movieDetails = `https://yts.am/api/v2/movie_details.json`;
  constructor(private myHttp: HttpClient )  {

  }

  getListOfMovies(page: number, collectionSize: number): any {
    return this.myHttp.get(`${this.moviesList}?limit=${collectionSize}&page=${page}`);
  }
  getMovieDetails(id: number): any {
    return this.myHttp.get(`${this.movieDetails}?movie_id=${id}&with_images=true&with_cast=true`);
  }
}

Второй файл является компонентом:

import { Component, OnInit } from '@angular/core';
import { MovieRequestService } from '../../shared/services/movie-request.service';
import { HttpClient} from '@angular/common/http';
import { ContentChild } from '@angular/core';
import { NgbPagination } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {
  @ContentChild(NgbPagination) pagination: NgbPagination;
  page = 1;
  collectionSize = 40;
  movies: any[] = new Array;
  constructor(private movieService: MovieRequestService, private http: HttpClient) {
    this.getPageFromService();
  }

  getPageFromService() {
    this.movieService.getListOfMovies(this.page, this.collectionSize).subscribe(response => this.movies = response.data.movies);
  }
  ngOnInit() {
  }
}

И, наконец, html компонента:

<div class="row" >
  <div class="col-sm-3 flex-md-wrap" *ngFor="let movie of movies">
    <div class="card mb-3">
      <a >
        <figure class="figure">
          <img src="{{movie.medium_cover_image}}" alt="{{movie.title}}" class="figure-img img-fluid rounded mx-auto d-block" width="253">
          <figcaption class="figure-caption">
          </figcaption>
        </figure>
      </a>
      <a routerLink="movie/{{movie.id}}"><div>{{ movie.title | json}}
      </div></a>
      <div class="mb-4">{{ movie.year | json}}</div>
    </div>
  </div>
  <ngb-pagination
    class="d-flex justify-content-center"
    (pageChange)="getPageFromService()"
    [collectionSize]="collectionSize"
    [(page)]="page"
    [boundaryLinks]="true">
  </ngb-pagination>
</div>

Результат:

Answer 1

Ваш collectionSize равен 40. По умолчанию размер страницы равен 10. Таким образом, вы видите 4 страницы.

Вам нужно изменить collectionSize = количество фильмов и pageSize из 40.

Редактировать:

this.movieService
  .getListOfMovies(this.page, this.pageSize)
  .subscribe(response => {
    this.movies = response.data.movies;
    this.collectionSize = response.data.movie_count;
  });

Редактировать 2: Похоже, что page не обновляется из-за обнаружения изменений, вам нужно передать событие emitted из pageChange, вы можете видеть, чтоесли вы регистрируете ваш this.page, он всегда возвращает предыдущее значение.

В вашем HTML:

 <ngb-pagination
(pageChange)="getPageFromService($event)"
[pageSize]="pageSize"
[(page)]="page"
[maxSize]="5"
[rotate]="true"
[collectionSize]="collectionSize"
[boundaryLinks]="true"
></ngb-pagination>

Вкл. .ts

getPageFromService(page) {
    this.movieService.getListOfMovies(page, this.pageSize).subscribe(response => {
      this.movies = response.data.movies;
      this.collectionSize = response.data.movie_count;
    });
}