Typscript：変数の範囲

Question

私のangular2アプリでは、私はそれに基づいてデバイスの緯度と経度を取得しようとしています。ここでの方法である：

getGeoLocation(){ 
     this._http.get(IP_to_GeoLocation_uri).subscribe(res =>{ 
                  this.lat=res.json().lat; 
                  this.lon=res.json().lon; 
                /* console.log("lat: "+this.lat+" long: "+ this.lon); */}); 
    } 

とconsole.log結果がgetGeoLocation()がうまく機能することを示しています。 しかし、このメソッドを別のメソッドで使用しようとすると、this.latとthis.lonはundefinedになります。 はここに私の方法である：私はそれを期待

getWeatherForcastWithLocation(){ 

     this.getGeoLocation(); 
     console.log("lat: "+this.lat+" long: "+ this.lon); 
     bla..bla..bla... 

    } 

、this.getGeoLocation();を呼び出すことによって、それは私のためにlonとlatを設定します。しかし、コンソールは彼らがundefinedだと言います。 コードの何が間違っていますか？

Answer 1

これは非同期呼び出しであるため、すぐにデータをフェッチしません。テンプレートでは

this.getGeoLocation(); 
setTimeout(() => { 
    console.log(this.users) 
}, 3000); 

getGeoLocation()の実行中にエラーを防ぐことができますされ実行された後、データを表示するために*ngIfディレクティブを使用することができ、：コンソールでの印刷が実行されるように、あなたがデータをフェッチした後に、遅延時間を設定することがconsole.log()にsetTimeout()を使用することができますあなたのコード。例えば、このような何か：

<div *ngIf="lat"> 
    {{lat}} 
</div> 

テンプレートから*ngIfディレクティブを削除した場合、あなたはlatが未定義であるというエラーが発生します。

Answer 2

GETは、オブザーバブルを返します。これは、あなたの後に.subscribe（）を持っている理由です。 代わりに、あなたが約束し、複数の.thenを追加するには、この観測可能に変換することができ（）この約束の後に呼び出されます：

getGeoLocation(){ 
    return this._http.get(IP_to_GeoLocation_uri) 
       .toPromise().then(res =>{ 
        this.lat = res.json().lat; 
        this.lon = res.json().lon; 
        return true; 
       }); 
} 

、その後のように、この約束に「連鎖」アクションを追加します。

オフ

getWeatherForcastWithLocation(){ 
    this.getGeoLocation() 
     .then(res => { 
      console.log(this.lat + " , " + this.lon); 
     }); 
} 

もちろん、これは非同期操作であるため、* ngIf = "lat"、* ngIf = "lon"を対応する限定要素に追加する必要があります。