Index repeating when the page is exchanged in ngx pagination

Question

my project is the following, is a site q uses the google Books api the problem is that when I add an object from the book array to the bookmark array, the index is reset when I change the page in NGX-pagination, so it turns out that only the items from the first page are added to the bookmark menu, follow the images:

books = []
  favs = []
  showFavs: boolean = false

  // pagination
  p: number = 1
  count: number = 4

  ngOnInit() {
    this.googleApiService.searchBooks('')
  }

  findBook(search){
    this.googleApiService.searchBooks(search).subscribe((data) => {
    this.books = data.items
    console.log(this.books)
  })
  }

  addFav(i: number) {
    const title = this.books[i].volumeInfo.title
    const exists = this.favs.find(i => i.volumeInfo.title == title)

    if(exists) {
      this.toastr.error('Este livro já consta nos seus favoritos!')
    } else {
      this.toastr.success(`O livro "${title}" foi adicionado aos seus favoritos!`)
      this.favs.push(this.books[i])
    }
  }

<div class="col-sm-12 col-md-6 col-lg-2 ml-1 mt-5 livros" *ngFor="let book of books | paginate: { id: '1' , itemsPerPage: count, currentPage: p }, let i = index">
            <div class="card d-flex justify-content-center" style="width: 250px; height: 400px;">{{i}}
                  <img src={{book.volumeInfo.imageLinks.smallThumbnail}} class="card-img-top">
                  <div class="card-body">
                    <p class="card-text"><strong>{{book.volumeInfo.title}}</strong></p>
                    <div class="m-2 text-center">
                    <button (click)="addFav(i)" class="btn btn-danger btn-sm text-light mb-1"><i class="fa fa-heart text-light"></i> Adicionar aos favoritos</button><br>
                    <a href={{book.volumeInfo.infoLink}} target="_blank"><button class="btn btn-sm btn-success text-light mb-1"><i class="fa fa-info text-light"></i> Ver Detalhes</button></a>
                    </div>
                  </div>
                </div>
              </div>

<!-- pagination for books -->
  <div class="text-center" *ngIf="!books.length < 1 && !showFavs">
    <pagination-controls (pageChange)="p = $event" id='1' previousLabel="Anterior" nextLabel="Próximo"></pagination-controls>
  </div>

How do I adjust the indices? so I could add any book without problems... thanks in advance!

Answer 1

Try adding pagination properties when adding a book.

 this.favs.push(this.books[(this.p*this.count)+i])

Or better do it in html:

(click)="addFav(book)"

ai vc have the whole object of the book and not only the Indian.