Discussion :

[djo007]

bonjour à tous

je début sur Ionic et entre autre Angular...

je rencontre un problème vraiment banale..
je n'arrive pas à afficher la valeur de la variable sur ma page...

Les variables en question:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
		  var lat = resp.coords.longitude;
		  var lng = resp.coords.latitude;

Si je fais un console.log(); sur les 2 variables je récupère bien les valeurs..

Code de la page home.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
 
 // importation des plugins
import { Geolocation } from '@ionic-native/geolocation';
 
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  constructor(public navCtrl: NavController, private geolocation: Geolocation, public platform: Platform) {
	  	platform.ready().then(() =>{
	  		this.loadPosition();
	  	});
  	}
 
	loadPosition(){
 
		this.geolocation.getCurrentPosition().then((resp) => {
		 // resp.coords.latitude
		 //let userPosition: LatLng = news LatLng(resp.coords.latitude,resp.coords.longitude);
		 console.log(resp.coords.latitude + ' ' + resp.coords.longitude);
		  var lat = resp.coords.longitude;
		  var lng = resp.coords.latitude;
 
 
		 // resp.coords.longitude
		}).catch((error) => {
		  console.log('Error getting location', error);
		});
	}
}

code de la page home.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    Latitude {{ lat }}, Longitude{{ lng }}
  </p>
</ion-content>

{{ lat }} et {{ lng }} n'affiche rien... même pas une erreur..

Merci d'avance pour l'aide

[pterrat]

En Angular 2, l'interpolation (ce que tu essayes de faire) ne fonctionne que si les propriétés appartiennent à la classe.

Tu dois donc les définir dans la classe correspondante et utiliser le mot clef this pour pouvoir les utiliser.

Si tu veux un tuto complet sur ça tu peux aller voir mon starter guide sur Angular ici.

[djo007]

tout simplement

j'avais déjà fait la déclaration des variables à un moment..
vu que ca ne marchait pas j'ai supprimer... il me manquait le simple "this"

Merci de ton aide en tout cas

[pterrat]

Oui et n'hésites pas à utiliser les mots clef public et private dans tes déclarations de propriétés de classe . TypeScript est bien fait autant utiliser ses atouts.