Tengo un proyecto Angular con una configuración similar a esta:
<input type="text" [(ngModel)]="search" > <app-item-list [items]="foundItems" (itemClick)="onItemSelected($event)"> </app-item-list> Hay un campo de entrada en el que el usuario escribe. A medida que escribe, el componente item-list elementos se llena con los resultados.
En el componente de la lista de elementos, simplemente muestra todos los elementos pasados y, si se hace clic en uno, se activa el evento itemClick
Siempre que la entrada permanezca activa, el usuario debe hacer clic dos veces en un elemento para que se active el evento de clic. Hacer clic en cualquier otro lugar (para anular la selección del campo de entrada) y luego hacer clic en un elemento también funciona.
Se supone que esto es una especie de 'cuadro desplegable' de búsqueda, donde al escribir se muestra una lista de opciones similares a las de autocompletar obtenidas de otro lugar. Funciona bien aparte de tener que hacer clic dos veces. El primer clic solo activa un evento ngModelChange y el segundo activa el evento itemClick .
Actualizar:
Aparentemente, esto tiene algo que ver con la estructura del componente app-iutem-list . Esta es una mirada al interior:
<button (click)="clickLog(1)"></button> <ul> <li *ngFor="let item of items; let i = index" (click)="onItemClicked(i)"> <button (click)="clickLog(2)"></button> <b class="title">{{ item.title }}</b> <div class="subtitle">{{ item.subtitle }}</div> </li> </ul>He agregado 2 botones que simplemente escriben en la consola. El botón n.° 1 funciona incluso si la entrada aún está activa, el botón n.° 2 no.
click es un evento DOM, no relacionado con el ngModel de nivel superior. El evento adecuado para esto es ngModelChange
<input type="text" [(ngModel)]="search" > <app-item-list [items]="foundItems" (ngModelChange)="onItemSelected($event)"> </app-item-list>Esto terminó siendo un problema con la actualización de los elementos de la lista en el momento exacto del primer clic.
Al hacer clic en uno de los elementos, ngModel activaría un evento de cambio, que alteraría la lista de elementos. La nueva lista de elementos se pasaría al componente item-list elementos, donde eliminaría/actualizaría la lista completa y perdería el evento de clic.
Agregar un trackBy a *ngFor para evitar actualizaciones innecesarias solucionó el problema.