Estoy haciendo una aplicación con angular y me he topado con un problema que no he podido solucionar. Tengo un método en mi componente que por el momento solo hace un console.log de un texto, el problema radica en que el método se ejecuta desde que inicio la aplicación, pero yo llamo el método en el evento click de un botón. Otro problema es que el método se ejecuta varias veces incluso sin yo presionar el botón.
No se a que de sebe esto ya que automáticamente la aplicación inicia empieza a ejecutarse el método de mi componente cuando este método debería ejecutarse cuando se presione el botón al cual esta encadenado.
Espero que alguien me ayude, muchas gracias de antemano.
Código de mi componente:
import { Component, OnInit, Input } from '@angular/core';
import { HomeService } from "../../Service/home.service";
import { SearchService } from "../../Service/search.service";
import { Dato } from '../../Models/array';
declare const $:any;
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.css'],
providers: [HomeService, SearchService]
})
export class CardComponent implements OnInit {
constructor( private _peticion_home:HomeService ) {
}
ngOnInit(): void {
}
}
capturar_id (array) {
console.log("Prueba");
/*
let boton_id = 0;
$('.lista').click(function() {
boton_id = $(this).attr('id');
});
console.log(array[boton_id][4]);
//colocar poster
document.getElementById('imagen-portada').setAttribute('src', array[boton_id[4]]);
*/
}
}
Este es el código de mi plantilla:
<section class="general-section">
<div class="row row-container col-md-12">
<div class="card-container" *ngFor="let elemento of dato.dato_general; let i = index">
<div class="card" style="width: 18rem;">
<img class="poster" class="card-img-top img-fluid" src={{dato.dato_general[i][4]}} alt="IMAGEN NO DISPONIBLE">
<div class="card-body">
<h5 class="card-title">{{dato.dato_general[i][1]}}</h5>
<hr class="bg-light"/>
<p class="id_pelicula">ID: {{dato.dato_general[i][0]}}</p>
<a [click]="capturar_id(this.dato.dato_general)" [routerLink]="['/details']" id={{i}} class="btn btn-danger card-boton lista">Ver Detalles</a>
</div>
</div>
</div>
</div>
</section>
Esto es lo que me arroja por consola: