angular / angularfire

Angular + Firebase = ❤️
https://firebaseopensource.com/projects/angular/angularfire2
MIT License
7.66k stars 2.19k forks source link

Realtime Database query example #3104

Open moblizeit opened 2 years ago

moblizeit commented 2 years ago

Version info

Angular: "@angular/core": "~13.0.0",

Firebase: "firebase": "^9.6.1",

AngularFire: "@angular/fire": "^7.2.0",

Other (e.g. Ionic/Cordova, Node, browser, operating system): "@ionic/angular": "^6.0.0" Capacitor 3

How to reproduce these conditions

I am looking into https://github.com/angular/angularfire/blob/master/samples/modular/src/app/database/database.component.ts

and don't see an example of how to query from realtime database.

My older code is

return new Promise((resolve, reject) => {
      this.db.list("/users/" + userKey + "/cards", ref => ref.orderByChild('_date'))
      .valueChanges().subscribe(
        (res:any) => {
            resolve(res)
        },
        err => {
            console.log(err)
            reject(err)
        }
      )}
    )

and trying to write something (below is a broken code):

 return new Promise((resolve, reject) => {
      const doc = ref(this.db, "/users/" + userKey + "/cards");
      listVal(ref => ref.orderByChild('_date')).subscribe(
        (res:any) => {
            resolve(res)
        },
        err => {
            console.log(err)
            reject(err)
        }
      )}
    )

Please advise

google-oss-bot commented 2 years ago

This issue does not seem to follow the issue template. Make sure you provide all the required information.

Golosay commented 2 years ago

Compat way: this.db.list("/users/" + userKey + "/cards", ref => ref.orderByChild('_date'))

Firebase 9 Modular way

import {
  Database,
  ref,
  listVal,
  query,
  orderByChild,
} from '@angular/fire/database';

constructor(private db: Database) {}
...
const listRef = ref(this.db, `/users/${userKey}/cards`;
    const qry = query(listRef, orderByChild('_date'));
    listVal(qry)
      .pipe(takeUntil(this.$destroy))
      .subscribe((dataList) => {
        // your listed data
      });