有人可以帮我修复分页代码吗?
有一项服务:
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 的示例:
答案 0 :(得分: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;
});
}