Angular2 - Valeur de la variable de composant définie sur la fonction de rappel non mise à jour dans le modèle

Question

Cas d'utilisateur: Lorsque l'application est ouverte dans le navigateur Web, l'utilisateur obtient "Connaître votre position" avec les options "Autoriser" et "Refuser".

J'ai l'exemple de code suivant.

ngOnInit() { 
    if ("geolocation" in navigator) { 
    navigator.geolocation.getCurrentPosition((position) => { 
     this.latitude = position.coords.latitude; 
     this.longitude = position.coords.longitude; 
     this.zoom = 18; 
    }); 
    } 
} 

cela fonctionne comme je peux voir console.log que les valeurs finales de latitude et de longitude est l'emplacement actuel si on les laisse sinon il est la valeur par défaut que je codé en dur.

Maintenant, mon problème est ici ce lieu courant mis à jour les modifications ne peut pas être vu dans le modèle quand il imprime {{latitude}} et {{longitude}}

J'ai essayé d'utiliser ngZone et ChangeDetectorRef mais n'a pas réussi

Quelqu'un peut-il aider à

Answer 1

L'API de géolocalisation n'est pas couverte par la zone Angulars. Faites le rappel courir à l'intérieur et angulaires zone de détection de manière explicite le changement angulaire sera exécuté et assurer la vue est mise à jour:

constructor(private zone:NgZone) {} 

ngOnInit() { 
    if ("geolocation" in navigator) {     
    navigator.geolocation.getCurrentPosition((position) => { 
     this.zone.run(() => { 
     this.latitude = position.coords.latitude; 
     this.longitude = position.coords.longitude; 
     this.zoom = 18; 
     }); 
    }); 
    } 
}