在Angular2視圖中訪問變量

Question

如何查看我的模板中返回的座標？

export class DashboardPage { 
    constructor(public navCtrl: NavController) { 
    Geolocation.getCurrentPosition().then(pos => { 
     console.log(pos.coords.latitude, pos.coords.longitude); 
    }); 
    } 
} 

我曾嘗試：

export class DashboardPage { 

    constructor(public navCtrl: NavController) { 

    Geolocation.getCurrentPosition().then(pos => { 
     this.latitude = pos.coords.latitude; 
     this.longitude = pos.coords.longitude; 
    }); 

    } 

} 

但是這給了我一個錯誤：

Typescript Error 
Property 'latitude' does not exist on type 'DashboardPage'. 
src/pages/dashboard/dashboard.ts 
Geolocation.getCurrentPosition().then(pos => { 
this.latitude = pos.coords.latitude; 
this.longitude = pos.coords.longitude; 

我希望能夠使用{{緯度}}和{{經度} }在我的模板中

Answer 1

您需要聲明您的屬性：

export class DashboardPage { 

    latitude: number; 
    longitude: number; 

    constructor(public navCtrl: NavController) { 

    Geolocation.getCurrentPosition().then(pos => { 
     this.latitude = pos.coords.latitude; 
     this.longitude = pos.coords.longitude; 
    }); 
    } 
} 

Answer 2

如果你想更angular2/rxjs導向：

export class DashboardPage { 
    geoData$: Observable<any>; 
    constructor(public navCtrl: NavController) { 
    this.geoData$ = Observable.fromPromise(Geolocation.getCurrentPosition()); 
    } 

} 

，然後在您的視圖：

<div>lat: {{(geoData$|async)?.latitude}}</div>