使用 Angular 制作分页 - The Movie DB 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 部电影，但我想要一个分页以在我跳到下一页时显示更多电影，但我不知道如何更改 [= 上的 ${page} 值33=] (discoverMovies) 或在 HTML

让我展示一下我是如何在我的页面上显示 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 属性 class

public currentPage:number = 1;

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

使用 Angular 制作分页 - The Movie DB API

Making paginations with Angular - The Movie DB API

typescript

themoviedb-api

angular