Angular 4 + Firebase obtenant la valeur d'un instantané lors de la demande de base de données

Question

J'essaie d'obtenir des éléments d'une base de données Firebase, mais il semble que je ne peux pas. L'opérateur "this" ne fonctionne pas dans la fonction snapshot (sur la ligne this.authState.prenom = snapshot.val().prenom)

Et si je le fais en dehors de la fonction, il semble qu'il soit exécuté avant la fonction, donc l'attribut est vide. La seule solution que j'ai trouvé est de mettre un délai d'attente (une ligne setTimeout(() => this.authState.prenom = prenom,1000)" mais ce n'est pas ce que je veux.

Je veux juste la déclaration this.authState.prenom = prenom; exécutée après la fonction de capture instantanée est plus ou d'obtenir la valeur de cette fonction d'instantané dans tous les . manière

Voici mon fichier (variables sont toutes déclarées)

auth.service.ts Voici le constructeur:

constructor(private afAuth: AngularFireAuth, 
    private db: AngularFireDatabase, 
    private router:Router) { 

this.afAuth.authState.subscribe((auth) => { 
    this.authState = auth; 

    if(this.currentUser){ 
    var userId = this.currentUser.uid; 

    var prenom: any; 
    var nom: any; 

    firebase.database().ref('/users/' + userId).on('value',function(snapshot) { 
     // this.authState.prenom = snapshot.val().prenom; <= This is not working because I can't use "this" operator here and don't know why 

     console.log(snapshot.val().prenom); 
     console.log(snapshot.val().nom); 

     prenom = snapshot.val().prenom; 
     nom = snapshot.val().nom; 

     // this.authState.nom = snapshot.val().nom; <= not working because of the operator "this" 
    }); 
    this.authState.prenom = prenom // <= Not working because it's executed before the snapshot function and don't know why 
    setTimeout(() => this.authState.prenom = prenom,1000); // <= This is working but setting timeout is not a good thing.. 
    setTimeout(() => this.authState.nom = nom,1000); 
    // console.log(this.authState.prenom); 
    } 
} 

Answer 1

Pour obtenir le travail this, utilisez la notation de la fonction graisse flèche (comme vous le faites avec le auth.subscribe):

firebase.database().ref('/users/' + userId).on('value', (snapshot) => { 
    this.authState.prenom = snapshot.val().prenom; 
    this.authState.nom = snapshot.val().nom; 
}); 

Quelques alternatives plus vieille école:

var that = this; // capture the correct this in a variable 
firebase.database().ref('/users/' + userId).on('value', function(snapshot) { 
    that.authState.prenom = snapshot.val().prenom; 
    that.authState.nom = snapshot.val().nom; 
}); 

Ou:

firebase.database().ref('/users/' + userId).on('value', function(snapshot) { 
    this.authState.prenom = snapshot.val().prenom; 
    this.authState.nom = snapshot.val().nom; 
}, this); // pass in the this as the last parameter 

Pour plus d'informations, je recommande fortement de lire How to access the correct `this` inside a callback?