Typscript : 변수의 범위

Question

내 angular2 응용 프로그램에서 ip를 기반으로 장치의 위도와 경도를 얻으려고합니다. 여기 방법 :

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()을 사용할 수 있습니다 당신의 코드. 예를 들어 이런 식으로 뭔가 : 당신은 템플릿에서 *ngIf 지시어를 제거하면

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

, 당신은 lat이 정의되지 않은 것으로 오류가 발생합니다.

Answer 2

GET은 관찰 가능을 반환합니다. 이것이 바로 그 후 .subscribe()가있는 이유입니다. 대신, 당신은)이 관찰 약속로 변환, 다중 그 때는를 (추가 할 수는이 약속 한 후 호출 후

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"을 해당하는 한정 요소에 추가해야합니다.