0

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);
  }
6
  • (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.
    – Lobos
    el 15 may. 2021 a las 15:42
  • @Lobos ¿como crearia esa tabla con angular ? el 16 may. 2021 a las 21:53
  • Te hice un ejemplo. Solo incluye el renderizado de la tabla para mostrar como se hace a la manera de Angular y como el evento click funciona. Ejemplo: stackblitz.com/edit/…
    – Lobos
    el 16 may. 2021 a las 23:13
  • @Lobos ...Gracias ... Pregunto como se hace en la llamada a la AJAX por que si hago this.items = JSON.stringfy(data); no carga la tabla... osea me falta que expliques un poco el codigo TS el 17 may. 2021 a las 18:29
  • De acuerdo, igual, no lo reconoce porque se está haciendo fuera de Angular. Modifiqué el ejemplo y agregué una petición HTTP para recuperar datos de una API a la manera de Angular.
    – Lobos
    el 17 may. 2021 a las 20:05

1 respuesta 1

0

Siguiendo lo indicado por @Lobo

HTML

 <table id="tablaPortada" class="table table-hover" style="border:none;text-align:center;">
    <thead style="display:none;"></thead>
    <tbody>
      <tr *ngFor="let item of items">
        <td>
          <a href= {{item.urlProfile}} style="color:silver;float:left;"> {{item.username}} </a>

          <img src= {{item.img64}}  style="width:360px;height:250px;border-radius:30%;padding:20px;" /><p></p><p></p>

          <label id="{{item.id}}"> {{item.texto}} </label>

          <a href="publicacion-home?user={{item.username}}&idf={{item.id}}" style="color:cornflowerblue;"> publicacion </a>

          <input type="image" src = {{item.iconLike}} style="width:20px;height:20px;" />

        </td>
      </tr>
    </tbody>
  </table>

TypeScript

import { Component, OnInit } from '@angular/core';
import { AppConfiguration } from "read-appsettings-json";
import * as $ from 'jquery';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  public items = [] ;

  constructor() { }

  ngOnInit() {
    console.log(AppConfiguration.Setting().urlServerHost);
    this.getImagenesPortada()
  }


  public getImagenesPortada () {
    var response = [];

    $.ajax({
      type: "POST",
      url: "Aplicacion/GetImagenesPortada",
      dataType: "json",
      success: function (data)
      {
        $.each(data, function (index, value) {
         response.push(value);
        });
      
      },
      complete: function () {
        console.log('getImagenesPortada');
      }
    });

    this.items = response;
    console.log(this.items);

    return false;
  }
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.