Discussion :

[novareva]

Bonjour,
J'ai un problème pour récupérer les valeurs d'un document firebase dans une collection pour l'insérer dans le html avec la méthode {{data.nom}} par exemple.

J'ai la collection "Etudes" et je veux récupérer 1 document de la collection avec son id (etudeid).

J'ai la fonction :

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
public constructor(private db: AngularFirestore) {
 
db.collection('etudes').doc(this.etudeid).ref.get().then(function (doc) {
      if (doc.exists) {
        console.log("ok");
        console.log(doc.data());
        console.log(doc.data().nom);
 
      } else {
        console.log("Pas de document avec cet ID!");
      }
    }).catch(function (error) {
      console.log("There was an error getting your document:", error);
    });
 
  }

La fonction fonctionne et la console me renvoie bien le nom de l'étude en l'occurence le doc.data().nom, MAIS Impossible de binder cette valeur dans le html. Pas d'erreur mais elle n'apparait pas !
Je m'arrache les cheveux ;-)

Quelqu'un peut il m'aider à récupérer cette valeur dans le html svp ?
Merci d'avance

[dukoid]

d'abord, on ne récupère jamais les données dans le constructeur
mais dans le cycle de vie ngOnInit

constructeur() --> à l'instanciation de l'objet, la vue n'est pas créer donc on ne peut rien afficher
ngOnInit() { --> la vue est intitialiser donc on peut y faire afficher des trucs

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
 
...
    nom: string;
...
ngOnInit() {
 
    db.collection('etudes').doc(this.etudeid).ref.get().then(function (doc) {
      if (doc.exists) {
        console.log("ok");
        console.log(doc.data());
        console.log(doc.data().nom);
         //
         //    le lien avec data doc.data().nom ?????
         //
         this.nom = doc.data().nom;
 
      } else {
        console.log("Pas de document avec cet ID!");
      }
    }).catch(function (error) {
      console.log("There was an error getting your document:", error);
    });
}

Comme la donnée est récupéré plus tard dans le temps car c'est une requête, il est bien de tester la donnée dans la vue avec *ngIf

Code :

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

1
2
 
<ng-container *ngIf="nom">{{nom}}</ng-container>

[novareva]

Merci beaucoup, effectivement je comprends le problème et j'ai de suite testé. Cependant cela ne fonctionne toujours pas. En effet en plaçant votre code modifié, "db" n'est plus reconnu sachant qu'il est déclaré dans le constructeur :

Code :

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

public constructor(private db: AngularFirestore) { ...

Comment le faire reconnaitre dans ngOninit() svp ?

[krakatoa]

en dehors du constructeur, on utilise toujours: this.
pour accèder à une variable, une fonction..

Code :

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

1
2
 
this.db.collectio...........

[novareva]

Merci de votre réponse rapide, c'est extrement sympathique. J'ai réglé le problème du ngOnInit() mais j'ai cette erreur dans la console :

There was an error getting your document: TypeError: Cannot set property 'nom' of undefined
at etude-thermique-step.component.ts:71
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Object.onInvoke (core.js:27148)
at ZoneDelegate.invoke (zone-evergreen.js:363)
at Zone.run (zone-evergreen.js:123)
at zone-evergreen.js:857
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:27136)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)

Alors que "nom" du document existe bien, ce qui est confirmé par le console.log :
...
nom: "sds"
...

Vous avez une idée d'où l'erreur peut venir svp ?

Pour résumé la console affiche cette valeur correcte puis me dit :

"TypeError: Cannot set property 'nom' of undefined...."

et l'affichage dans le html est toujours absent.
Merci d'avance.

[krakatoa]

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
 
...
    nom: string;
...
ngOnInit() {
 
    let that = this;         //  this du contexte composant
    //
    this.db.collection('etudes').doc(this.etudeid).ref.get().then(function (doc) {
      if (doc.exists) {
        console.log("ok");
        console.log(doc.data());
        console.log(doc.data().nom);
         //

         //   ici this.   correspond au this du context de l'observable donc ça ne va pas
         // donc on utilise that ou on a sauvergardé le this du context composant
         that.nom = doc.data().nom;
 
      } else {
        console.log("Pas de document avec cet ID!");
      }
    }).catch(function (error) {
      console.log("There was an error getting your document:", error);
    });
}

this. designe le context ou il se trouve
en general c'est celui du composant
mais parfois, comme pour un observable c'est celui de ce dernier...

[novareva]

MERCI INFINIMENT ! ÇA MARCHE !!!