Noticias:

¿Deseas poder tener acceso a contenido exclusivo? ¿Tu propia zona? entonces mira esto: Platinum [Leer]

Menú principal

Angular y carga dinamica eventos

Publicado por sismacom, 02 Agosto de 2022, 22:11

Tema anterior - Siguiente tema

0 Usuarios y 1 Visitante están viendo este tema.

sismacom

Buenas a todos, tengo un problema que no he podido resolver:

estoy haciendo una web con angular ya que me facilita muchas cosas entre ellas los eventos como click, change etc.
Lleno una lista con las ciudades de esta forma y funciona bien incluyendo el evento de seleccionar una ciudad
<ul id="listaciudades" class="dropdown-menu" style="max-height: 200px;overflow:auto" aria-labelledby="btnCiudad">
           <li id="licity" *ngFor="let city of lciudades" (click)="cambiarCiudad(city)"  value="{{city}}" >
                <a class="dropdown-item" >{{city}}</a>
              </li>
            </ul>

borro la lista y la cargo nuevamente con estas instrucciones y me funciona:
$("#listaciudades").empty();
for(let i=0; i<this.lciudades.length; i++){
    $("#listaciudades").append(`<li id="ciudad" value="${this.lciudades[i]}">
    <a class="dropdown-item">${this.lciudades[i]}</a></li>`)
  }

Pero el problema es que se pierde el evento click, y no se como añadirlo a los nuevos elementos de la lista.

Gracias de antemano

Rock Lee

No estoy tanto con angular pero en realidad tenes trabajar la misma lista en una funcion y el click en general porque l renovarlo lo toma como si deberia limpiar dicha accion. ¿Desde el inspector de elementos en el apartado consola te muestra algo?


Saludos Familia!

Pedro

Hola Sismacom. Si he entendido bien tu pregunta, creo que el problema es que no has entendido correctamente cómo funciona Angular.

En Angular las variables están vinculadas dinámicamente (binding), de manera que en cuanto cambies su valor en el código, esto se reflejará en la vista.

Por un lado, veo que usas JQuery. Esta práctica está muy desaconsejada en Angular (se usaba en las primeras versiones, pero ya no). Esto es así porque Angular debería aislarnos del DOM y ser él el que lo maneje. Esto es por dos razones, por un lado porque si cambias el DOM "a mano", Angular no se enteraría y los resultado podrían no ser los esperados, como te está ocurriendo a ti. Por otro lado, porque es posible que en un futuro el funcionamiento del DOM cambie e incluso en algunas plataformas desaparezcan objetos como "window" y "document".

En tu caso, has hecho correctamente la vista, pero te falla el código del componente. Como te digo, las variables están vinculadas, así que:

Para borrar la lista, simplemente haz lo siguiente en el código
lciudades = [];

Para añadir un elemento a la lista
lciudades.push("nueva ciudad");

O para eliminar una ciudad de la lista
lciudades.splice(1,1)

Verás que al ejecutar cada una de las líneas anteriores, la vista se actualizará automáticamente.

Te recomiendo eliminar JQuery de tu proyecto y no acceder al DOM directamente mediante ids o similares.

Espero haberte ayudado.
TGI.Code
Pedro González

Curso de Angular 14