使用Angular进行分页-电影数据库API

Question

我正在尝试在我的应用程序消费tmDB API上添加更多页面，但我是新手，不知道如何做到。

我在我的电影组件中有一个电影服务

discoverMovies(page: number) {
let discover = `${this.discoverUrl}?api_key=${this.apiKey}&language=${this.language}&sort_by=popularity.desc&include_adult=false&include_video=false&page=${page}`;
return this.http.get(discover);
}

这段代码显示了我页面上的前20部电影，但当我跳到下一页时，我希望分页显示更多的电影，并且我不知道如何更改movie.service.ts(discoverMovies(或HTML 中的${page}值

让我展示一下我是如何在我的页面上显示20部电影的：

movie.service.ts:

getMovies(query: string = '', page: number = 1) {

if ((query = '')) {
return this.discoverMovies(page);
}
if (query) {
return this.searchMovies(query, page);
} else {
return this.discoverMovies(page);
}
}

movies.component.ts:

getMovies() {
this.moviesService.getMovies(this.movieName).subscribe((paramName) => {
this.actualPage = (paramName as any).page;
this.totalPages = (paramName as any).total_pages;
this.movies = (paramName as any).results;
});
}

movies.component.html：

<div class="row">
<div *ngFor="let movie of movies" class="col-sm-4">
<div class="card">
<div class="card-body">
<h4 class="card-title" style="text-align: center;">{{movie.title}}</h4>
<hr>
<img *ngIf="movie.poster_path" [src]="getImage(movie.poster_path)" class="posterPath">
<img *ngIf="!movie.poster_path" class="posterPath" src="https://placehold.it/500x740">
<div class="movies-info">
Data de Lançamento: {{movie.release_date}} <span><img src="https://www.kindpng.com/picc/b/29/298871.png"
alt="logo-star">{{movie.vote_average}}</span>
</div>
<p class="card-text" style="text-align: center;">{{movie.overview}}</p>
<a class="btn btn-primary" id="movie-details">Detalhes</a>
</div>
</div>
</div>
</div>

这是我想更改movie.service.ts的${page}值的地方。点击按钮：

<div class="pagination">
<button class="btn btn-primary">-</button>
<input type="text" [value]="actualPage" readonly>
<button class="btn btn-primary">+</button>
</div>

Answer 1

在组件类中创建currentPage属性

public currentPage:number = 1;

每当你点击按钮时，用currentPage+1参数调用getMovies()函数，不要忘记更新currentPage的值。