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

这是一个异步调用，因此您不会立即获取数据。您可以在tableView:didSelectRowAtIndexPath上使用setTimeout()设置延迟，以便在获取数据后执行控制台中的打印：

console.log()

在模板中，您可以使用this.getGeoLocation(); setTimeout(() => { console.log(this.users) }, 3000);指令在*ngIf执行后显示数据，这样可以防止执行代码时出错。像这样的东西：

getGeoLocation()

如果从模板中删除<div *ngIf="lat"> {{lat}} </div>指令，则会收到*ngIf未定义的错误。

Answer 2

GET返回一个可观察的。这就是为什么你之后有.subscribe（）的原因。相反，您可以将此observable转换为promise，并在此promise之后添加多个.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”。

打字稿：变量范围

2 个答案: