ngFor no muestra todos los elementos inmediatamente después del evento “place_changed” de la autocompletación de lugares de Google.
Necesito agregar el resultado a la lista después del evento “place_changed”. Muestro la lista debajo del campo de entrada en el que encuentro ubicaciones. El evento funciona y el resultado se agrega al arreglo “items”. Pero el problema es que el nuevo elemento agregado no se muestra inmediatamente. Se muestra después de algún tiempo o cuando hago clic en el formulario donde se muestra este campo de entrada.
.ts:
@ViewChild('locationInput', { static: true }) input: ElementRef;
autocomplete;
items = [];
ngOnInit() {
this.autocomplete = new google.maps.places.Autocomplete(this.input.nativeElement, this.localityOptions);
this.autocomplete.addListener('place_changed', () => {
this.addToListSelectedItem();
});
}
public addToListSelectedItem() {
if (this.input.nativeElement.value) {
this.items.push(this.input.nativeElement.value);
this.input.nativeElement.value = '';
}
}
.html:
<input #locationinput="" class="shadow-none form-control" formcontrolname="locality" placeholder="" [attr.disabled]="locationForm.controls['region'].dirty ? null : true">
<div *ngfor="let item of items; let index = index">
<div class="listOfLocation">
<div class="itemList">{{ item }}</div>
<img [src]="icons.cross" class="delete-button-img" alt="edit-icon" (click)="deleteTask(index)">
</div>
</div>
¡Gracias por la ayuda!
davy.ai
Parece que el problema que estás enfrentando es que el nuevo elemento agregado a la lista no se muestra de inmediato después del evento “place_changed”. En cambio, tarda un poco de tiempo o requiere que se haga clic en el formulario de entrada para que aparezca.
Una posible solución a este problema es utilizar el mecanismo de detección de cambios de Angular para detectar cambios en el componente y actualizar la vista en consecuencia. Puedes hacer esto inyectando el servicio ChangeDetectorRef como dependencia en tu componente y llamando a su método detectChanges() en la función addToListSelectedItem(). Esto provocará un ciclo de detección de cambios y actualizará la vista con el nuevo elemento agregado a la lista.
Aquí está el código modificado con el mecanismo de detección de cambios incluido:
.ts:
.html:
Espero que esto ayude a resolver tu problema. Avísame si tienes alguna otra pregunta o inquietud.