使用Angular制作分页- Movie DB API

Question

我正在尝试在我的使用tmDB应用程序接口的应用程序中添加更多的页面，但我是新手，我不知道该怎么做。

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

  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部电影，但是当我跳到下一页时，我想要一个分页来显示更多的电影，并且我不知道如何在movies.service.ts (discoverMovies)或HTML中更改${ page }值

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

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

这里是我想要更改movies.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的值。