Tengo una aplicación Asp.Net Core con Angular y estoy creando una tabla desde una llamada AJAX y tengo un problema al crear en esta tabla un elemento Anchor … Este se crea perfectamente pero al hacer click no ejecuta la función que invoco que está en una clase TypeScript.
¿Cómo puedo resolver esto?
Esta es la linea:
<a class='btn' style="color:cornflowerblue;"> <i (click)= 'eliminar(${item.id});' > eliminar </i></a>
Código:
public getImagenes() {
const identidad = $('#_guid').val();
if (identidad === '' || identidad === null) {
console.log('identidad no puede ser vacio')
return false;
}
$.ajax({
type: "POST",
url: "Aplicacion/GetImagenesPerfil",
data: { identidad: identidad },
dataType: "json",
success: function (data) {
console.log(data);
$("#tablaPortada thead tr").remove();
$('#tablaPortada tbody tr').remove();
let title = `<tr>
<th> </th>
</tr>`;
$("#tablaPortada thead").append(title);
$.each(data, function (index, item) {
let tr = `<tr>
<td>
<img src= ${item.img64} style="width:360px;height:250px;border-radius:30%;padding:20px;"/></p></p></p>
<label id=${item.id}> ${item.texto} <label>
<a class='btn' style="color:cornflowerblue;"> <i (click)= 'eliminar(${item.id});' > eliminar </i></a>
</td>
</tr>`;
$('#tablaPortada tbody').append(tr);
});
});
return false;
}
public eliminar(id) {
console.log(id);
}
(click)
es un evento manejado por Angular por eso no lo reconoce si es creado a partir de javascript externo. Lo mejor es migrar ese código Jquery y trabajar solamente con Angular.click
funciona. Ejemplo: stackblitz.com/edit/…