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 ... etc），而不是idx。

这是我的组件。

 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

即使代码看起来正确，也请尝试在ngFor中传递当前对象，

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

并访问控制器中的ID，

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

Answer 2

解决方案是发送具有其属性的对象，因为如果我发送循环值，则该函数将获取数组序数：

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

Angular获取选择的let值

2 个答案: