Angular2 - コールバック関数で設定されたコンポーネント変数の値がテンプレート内で更新されない

Question

ユーザーの場合：アプリケーションがWebブラウザで開かれると、ユーザーは「許可」と「拒否」オプションでalter- "Know your location"を取得します。

次のコードサンプルがあります。

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

私はそれ以外の場合は、私がハードコーディングされたデフォルト値で許可されている場合、緯度と経度の最終値は、現在の場所であることにconsole.log見ることができるように、この作品。

今ここに私の問題は、誰もが

Answer 1

を助けることができる、それが {{latitude}}と {{longitude}}

を印刷するときに、この更新された現在位置の変更は、私がngZoneとChangeDetectorRefを使用してみましたが、何の成功

ませんでしたしたテンプレートで見ることができないです

ジオロケーションAPIは、Angularsゾーンでカバーされていません。 作る明示的Angularsゾーン内で実行するコールバックと角度変化の検出を実行し、ビューが更新されることを保証されます。

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; 
     }); 
    }); 
    } 
}