Bomber Code

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

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!

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.