मैं अपने आवेदन उपभोग 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) पर ${page} मान को कैसे बदला जाए ) या 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>
0
antonnymello 13 सितंबर 2020, 17:27

1 उत्तर

सबसे बढ़िया उत्तर

अपने कंपोनेंट क्लास में एक currentPage प्रॉपर्टी बनाएं

public currentPage:number = 1;

और जब भी आप बटन पर क्लिक करें, getMovies() फ़ंक्शन को currentPage+1 पैरामीटर के साथ कॉल करें, और currentPage के मान को अपडेट करना न भूलें।

0
Mark Rotteveel 13 सितंबर 2020, 20:25