estoy desarrollando una app con angular y un poco de JQuery y me he topado con un error.
El problema es que cuando llamo una función que esta en mi componente desde mi vista, está se ejecuta varias veces y yo simplemente le doy un solo click al botón.
Quisiera que alguien me ayudara con este problema.
Codigo de mi vista (Donde llamo la función. La función se llama ¨update_contact()¨)
<div id="cotainer-contact">
<h2 class="head-style another-head">Contactos</h2>
<div id="search">
<input (keydown.enter)="search_contact()" [(ngModel)]="text_search" [ngModelOptions]="{standalone: true}" id="input-search" class="form-control" type="text" placeholder="Nombre de Contacto">
<div id="dos-botones">
<button (click)="search_contact()" id="boton_search" class="btn btn-success boton_search">Buscar</button>
<button (click)="show_contacts()" id="boton_all" class="btn btn-primary boton_search">Todos</button>
</div>
</div>
<div id="card-container">
<div *ngFor="let dato of this.listado_contactos; let i = index" class="card mt-5" style="width: 18rem;">
<img class="image card-img-top img-fluid" src="../../assets//contact-icon-png-1.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><strong>Nombre:</strong> {{listado_contactos[i].NOMBRE}}</h5>
<h5 class="card-title"><strong>Apellido:</strong> {{listado_contactos[i].APELLIDO}}</h5>
<h5 class="card-title"><strong>Telefono:</strong> {{listado_contactos[i].TELEFONO}}</h5>
<h5 class="card-title"><strong>Correo:</strong> {{listado_contactos[i].EMAIL}}</h5>
<div id="botones">
<button id="{{i}}" (click)="update_contact()" class="edit interactuar btn btn-primary editar">Editar</button>
<button id="{{i}}" class="delete interactuar btn btn-danger borrar">Borrar</button>
</div>
</div>
</div>
</div>
Código de mi componente (Donde se encuentra la función)
import { Component, OnInit } from '@angular/core';
import { FormComponent } from '../form/form.component';
import { ContactService } from "../Services/contact.service";
import {Router} from '@angular/router';
declare const $:any;
@Component({
selector: 'app-contacts',
templateUrl: './contacts.component.html',
styleUrls: ['./contacts.component.css'],
providers: [ContactService]
})
export class ContactsComponent {
public listado_contactos:string[];
public text_search:string;
constructor( private peticion?:ContactService ) {
this.listado_contactos = [];
}
//Metodo para actualizar un contacto
update_contact() {
let aumentar = 0;
$(document).on('click', '.edit', function(event) {
const id = this.id;
console.log(id);
});
}
}
Como Pueden ver me imprime el id en la consola varias veces cuando solo le doy una sola vez al boton.