Angular Получение выбранного значения

Question

Я только изучаю Angular и пытаюсь получить значение id со страницы поиска.Моя страница поиска работает хорошо, я могу получить элементы из своего сервиса, и это код:

<div class="card-columns">
    <div class="card animated fadeIn fast" *ngFor="let cancion of canciones; let i = index">
        <img [src]="cancion.img" class="card-img-top" [alt]="cancion.cancion">
        <div class="card-body">
            <h5 class="card-title"> {{ cancion.artista }} </h5>
            <p class="card-text">{{ cancion.idx }}</p>
            <p class="card-text">{{ cancion.cancion }}</p>
            <p class="card-text"><small class="text-muted"> {{ cancion.lanzamiento }} </small></p>
            <p class="card-text">{{ cancion.lyrics }}</p>

            <button (click)="verCancion(i)" type="button" class="btn btn-outline-primary btn-block"> 
            Ver mas...
            </button>



        </div>
    </div>
</div>

Моя проблема, когда я пытаюсь получить cancion.idx для маршрутизации на страницу сведений, потому что явозвращает индексы массива (0,1,2 ... и т. д.), а не идентификатор.

это мой component.ts

 verCancion( idx:number ){
console.log("id de disco en Busquedas => ", idx );
this._ruteador.navigate( ['/cancion', idx] );                // Redirigimos al componente cancion, especificandole el id de la cancion
}

И, как я сказал, idx - это не то значение, которое я хочу.

Пожалуйста, я надеюсь, что кто-нибудь может мне помочь.

Answer 1

Решение отправляет объект со своим свойством, потому что если я отправлю значение цикла, функция получит порядковый номер массива:

<button (click)="verCancion(cancion.idx)" type="button" class="btn btn-outline-primary btn-block"> 
        Ver mas...
        </button>

Answer 2

Даже если код выглядит правильно, попробуйте передать текущий объект в ngFor,

 <button (click)="verCancion(cancion)"

и получить доступ к идентификатору в контроллере,

verCancion( cancion : any){
 console.log(cancion.idx);
}