AngularFire2 v5.0对象

Question

So i am trying to wrap my head around AngularFire2. I started with version 5.0 and so many things have changed lately, that most things on the internet are outdated.

All i really want to achieve right now is retrieving an object from my Angular database and pass the data to my template. Sounds easy, but it apparently is not. There is close to no documentation.

I tried to write a getData function like so:

getData(objPath: string): AngularFireObject<any> {
    // console.log(this.db.list(objPath).valueChanges());
    return this.db.object(objPath).valueChanges();
  }

I am getting this error:

Type 'Observable<{}>' is not assignable to type 'AngularFireObject'. Property 'query' is missing in type 'Observable<{}>'.

I tried swapping out the valueChanges() part with subscribe() or others but it does not work. And if i just log return this.db.object(objPath); without anything else i get something like this : {"query":"https://blabla.firebaseio.com/users/Vi37EbcH"}

How can i query this specific object @ users/Vi37EbcH ? Please help.

Answer 1

I have made a full example of fetching a list and one item. I used snapshotChanges to be able to add ID to each item, because its very common to click on an item from a list, and then fetch that item from the ID. Also, using map() will allow you to convert the item before it reaches the template.

I also use subscribe to get the result out of the observable, ready to be used in a template. Here is the example:

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import { Activity } from '../shared/interfaces/Activity';

@Component({
  selector: 'app-activities',
  templateUrl: './activities.component.html',
  styleUrls: ['./activities.component.scss']
})
export class ActivitiesComponent implements OnInit {

  activitiesCollection: AngularFirestoreCollection<Activity>;
  activitiesDoc: AngularFirestoreDocument<Activity>;
  itemList: Activity[];
  editItem: Activity;

  constructor(public db: AngularFirestore) { }

  ngOnInit() {
    this.activitiesCollection = this.db.collection('activities');
  }

  getActivities() {
    this.activitiesCollection
      .snapshotChanges()
      .map(arr => {
        return arr.map(snap => {
          const obj = snap.payload.doc.data() as Activity;
          obj.id = snap.payload.doc.id;
          return obj;
        });
      })
      .subscribe(response => {
        console.log('getActivities4: subscribe: response: ', response);
        this.itemList = response;
      });
  }

  getActivity(id) {
    this.activitiesDoc = this.activitiesCollection.doc(id);
    this.activitiesDoc
      .snapshotChanges()
      .map(snap => {
        if (snap.payload.exists) {
          const obj = snap.payload.data() as Activity;
          obj.id = snap.payload.id;
          return obj;
        }
      })
      .subscribe(response => {
        this.editItem = response;
      });
  }


}

Answer 2

I may have fixed it like so :

constructor(private db: AngularFireDatabase, private route: ActivatedRoute) {
    this.route.params.subscribe(params => (this.path = `users/${params.id}`));
    const userobject = db.object<any>(this.path);
    const users$: Observable<any[]> = userobject.valueChanges();
    users$.subscribe(console.log);
  }