web-dev-qa-db-fra.com

AngularFire2: Base de données en temps réel: comment obtenir la clé et la valeur

J'utilise AngularFire2 pour obtenir des données de la base de données Firebase (en temps réel).

Ce que j'ai fait: 

  • Base de données Firebase 

{ “Classe”: { "étudiant" : { “Tom”: “mâle”, “Marie”: “femme”, “Peter”: “mâle”, “Laura”: “femme” }, "numberOfStudent": 10 } }

  • app.component.ts

    import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

...
export class AppComponent {

   class: Observable<any>;
   students: Observable<any[]>;

constructor(private db: AngularFireDatabase) {
   this.class = db.object(‘class’).valueChanges();
   this.students = db.list(‘class/student’).snapshotChanges();
 }

}

  • app.component.html:

<h2>Class size: {{ (class | async)?.numberOfStudent }}</h2>
<ul>
  <li *ngFor="let i of students | async">
    {{i.key}} : {{i.value}}
  </li>
</ul>

Qu'est-il arrivé:

Taille de la classe: 10

À M :

Marie:

Peter: 

Laura :

Il ne retourne pas la valeur de la liste.

Toute suggestion est appréciée.

angularfirebaseangularfire2real-time-data
7
Phong Vu

UPD

avec new Angular 6 et RxJS 6 vous le ferez:

import { map } from 'rxjs/operators';
// ...
return this.fb.list(`/path/to/list`)
  .snapshotChanges()
  .pipe(map(items => { .            // <== new way of chaining
    return items.map(a => {
      const data = a.payload.val();
      const key = a.payload.key;
      return {key, data};           // or {key, ...data} in case data is Obj
    });
  }));
7
Matiishyn

La bibliothèque AngularFire2 a subi des changements radicaux depuis la réponse de @ rickdroio. Voici une version mise à jour de la solution:

afs.collection<Shirt>('class/student').snapshotChanges().map(actions => {
  return actions.map(a => {
    const data = a.payload.val();
    const id = a.payload.id;
    return { id, ...data };
  });
});
6
user9021566

J'ai réussi à obtenir la clé et la valeur de la liste. Il suffit de suivre quelques conseils ci-dessous: 

  • Assurez-vous d'utiliser snapshotChanges ()

<li *ngFor="let i of seats | async">
    {{i.key}} : {{i.payload.val()}}
</li>

Cela a fonctionné pour moi, mais je reste ouvert pour recevoir plus de meilleures pratiques

3
Phong Vu

Selon la directive disponible sur https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md vous pouvez faire quelque chose comme ça:

afs.collection<Shirt>('class/student').snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });

Il retournera un tableau similaire à celui de la base de données Firebase précédente.

2
rickdroio

votre problème est que vos étudiants objets JSON ne sont pas un tableau et que vous essayez de le parcourir en boucle.

    "student" : { “Tom” : “male”, “Mary” : “female”, “Peter” : “male”, “Laura” :
“female” }, "numberOfStudent” : 10 }

vous devez faire de vos étudiants une liste de objets pour les parcourir en boucle, comme ceci:

   "student" :
[ { "name" : "Tom", "sex" : male}, {"name" : "Mary, "sex" : "female" }, ... ]

la boucle par let i of student | async et accédez au nom et au sexe i?.name, i?.sex

1
FussinHussin