Estoy usando Google Maps e intento mostrar un div cuando el usuario hace clic en un pin.
<div *ngIf="this.viewing_place"> {{ this.viewing_place?.title || 'NO_PLACE' }} </div> function redrawMap(){ let self = this; this.places.forEach(function(place){ let marker = self.map.addMarkerSync({ position :new LatLng(place.pin_lat, place.pin_long) }); marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => { self.openPlaceInfo(place); }); }); }El evento de clic funciona bien y el objeto de lugar se pasa correctamente.
openPlaceInfo(place){ console.log(place); //===========> shows correct object this.viewing_place = place; //======> set the page variable } El problema es que el div no se muestra , como la variable this.viewing_place no está configurada.
Así que creé un método manual solo para probar, y cuando uso esta función, funciona correctamente.
manuallyTest(){ this.viewing_place = {title:'test place'}; }¿Estoy haciendo algo mal? Esto sucede solo en iOS y Android. Funciona perfectamente en el navegador.
En dispositivos móviles, angular tiene una limitación que llama al ciclo de detección de cambios cuando una variable se actualiza desde observable. Experimenté esto cuando trabajé con Ionic. Intente ejecutar su función dentro de NgZone para forzar el ciclo de detección de cambios para volver a representar la interfaz de usuario.
constructor() { ... private zone: NgZone } marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => { this.zone.run(() => { self.openPlaceInfo(place); }); }); OR openPlaceInfo(place){ console.log(place); //===========> shows correct object this.zone.run(() => { this.viewing_place = place; //======> set the page variable }); }¡Espero que esto te ayude!