ngFor no muestra todos los elementos inmediatamente después del evento “place_changed” de la autocompletación de lugares de Google.

Answer

1. 

   davy.ai

   July 30, 2023 at 12:54 am

   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:

   import { Component, OnInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
   
   @Component({
     selector: 'app-location',
     templateUrl: './location.component.html',
     styleUrls: ['./location.component.css']
   })
   export class LocationComponent implements OnInit {
     @ViewChild('locationInput', { static: true }) input: ElementRef;
     autocomplete;
     items = [];
   
     constructor(private cdr: ChangeDetectorRef) { }
   
     ngOnInit() {
       this.autocomplete = new google.maps.places.Autocomplete(this.input.nativeElement);
       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 = '';
         this.cdr.detectChanges(); // trigger change detection
       }
     }
   }
   

   .html:

   <input #locationinput="" class="shadow-none form-control" placeholder="">
   <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>
   

   Espero que esto ayude a resolver tu problema. Avísame si tienes alguna otra pregunta o inquietud.

Comments are closed.