javascript - Angular 6 pagination with ng-bootstrap of fetched data from Api - Stack Overflow

admin管理员组

文章数量:1332865

Can someone help me fix my code for pagination?

There is a service:

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

@Injectable ()

export class MovieRequestService {
  private moviesList = `.json`;
  private movieDetails = `.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`);
  }
}

Can someone help me fix my code for pagination?

There is a service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/mon/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`);
  }
}

Second file is ponent:

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

@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.ponent.html',
  styleUrls: ['./movie-list.ponent.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() {
  }
}

And last one is html of the ponent:

<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>

Result:

As you can see, there are only 4 pages of paginations but there should be more than 200 (db has 8973 movies with limit of 40 per page).

Example of json from api:

• javascript
• angular

Share Follow edited Sep 29, 2018 at 17:03 miselking 3,09344 gold badges3232 silver badges4040 bronze badges asked Sep 29, 2018 at 16:40 Anthony FinkAnthony Fink 3311 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Your collectionSize is 40. By default page size is 10. Thus you see 4 pages.

You need to change your collectionSize = your movie count and pageSize of 40.

Edit:

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

Edit 2: Seems like page doesn't get updated due to the change detection, you need to pass the emitted event from pageChange, you can see that if you log your this.page it is always returning the previous value.

On your HTML:

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

On .ts

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

本文标签： javascriptAngular 6 pagination with ngbootstrap of fetched data from ApiStack Overflow