как получить id объекта в массиве angular

Question

У меня есть компонент, который показывает список книг

<div class="col-lag-12">


  <ul class="list-group">
    <li class="list-group-item" *ngFor="let book of books; let i = index">
      <div class="avatar_book">
        <img src="{{ url + 'avatar/' + book.image }}" alt="">
      </div>
    <h4>
      <a [routerLink]="['/inicio']">
        {{book.title}}
      </a>
    </h4>
    <p>{{book.description}}</p>
    <p>{{book.author}}</p>
    <p>{{book.stock}}</p>
    <p>{{book.price}} $</p>
    <a [routerLink]="['/updatebook', i]" (click)="getId()" class="btn btn-primary float-right">update</a>

   </li>
  </ul>
</div>

<ul class="pagination">
   <li class="page-item">
     <a class="page-link" [routerLink]="['/pruebabook', prev_page]">&laquo;</a>
   </li>
   <li class="page-item" *ngFor="let num of number_pages">
      <a class="page-link" [routerLink]="['/pruebabook', num]" href="">{{ num }}</a>
   </li>

   <li class="page-item">
     <a class="page-link" [routerLink]="['/pruebabook', next_page]">&raquo;</a>
   </li>
 </ul>

JS

export class PruebabookComponent implements OnInit {

  public identity;
  public token;
  public books: Book[];
  public totalPages;
  public page;
  public next_page;
  public prev_page;
  public number_pages;
  public url: string;
  public bookId;
  public book: Book;
  public _id;
  @ViewChild(UpdatebookComponent) updateBook: UpdatebookComponent;
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private userservice: UserService,
    private bookservice: BookService
  ) {
     this.url = global.url;
     this.book = new Book('', '', '', '', 1, '');

}
  ngOnInit(): void {
    this.route.paramMap.subscribe(params=>{
      let page:number = +params.get('page');
      console.log(page);
      if (!page) {
        page = 1;
      }
      this.getBooks(page);
    })
  }


 getId()
 {
   // recoger id del libro
   this.bookId = this.books.title;
   console.log(this.bookId);

 }

У меня есть массив книг, но я не могу получить _id book, когда я нажимаю кнопку обновления

0: {_id: "5f2629a958a735467cfca6bb", date: "2020-08-02T02:49:13.641Z", title: "lkjlkj", description: "jlkjlkj", author: "jlkjlkj", …}

, я получаю идентификатор элемента массива с <a [routerLink]="['/updatebook', i]"

Но как получить _id объекта в массиве?

Answer 1

В вашем li, который вы зацикливаете с ngFor, я уверен, что вы можете получить свой идентификатор по book._id, верно? Итак, в вашем getId(book._id) проходе функции book._id и в консольном журнале вы получите это. Проверьте функцию getId ниже. И даже вы можете пройти его где угодно тогда. убедитесь, что вы также получаете его с некоторыми параметрами в файле ts

getId(x) { console.log(x); }

Ваш HTML

 <li class="list-group-item" *ngFor="let book of books; let i = index">
  <div class="avatar_book">
    <img src="{{ url + 'avatar/' + book.image }}" alt="">
  </div>
<h4>
  <a [routerLink]="['/inicio']">
    {{book.title}}
  </a>
</h4>
<p>{{book.description}}</p>
<p>{{book.author}}</p>
<p>{{book.stock}}</p>
<p>{{book.price}} $</p>
<a [routerLink]="['/updatebook', i]" (click)="getId(book._id)" class="btn btn-primary float-right">update</a>

Answer 2

// pass Book id on click update book click event

<a [routerLink]="['/updatebook', i]" (click)="getId(book._id)" class="btn btn-primary float-right">update</a>

// Get Book Id here
getId (bookId) {
   console.log(bookId); // 5f2629a958a735467cfca6bb
   this.bookId = bookId;
   
}