javascript - 使用 ng-bootstrap 从 Api 获取数据的 Angular 6 分页

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>

结果:

如你所见，分页只有4页，但应该有200多页(db有8973部电影，每页限制40部)。

来自 api 的 json 示例:

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 由于更改检测而没有更新，您需要传递从 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;
    });
}