Firebase error while subscribing to ref.on ('value, callback); | The 'subscribe' property does not exist in the type '(a: DataSnapshot, b ?: string) => any'

Question

I am using firebase real-time database in angular. I'm trying to get some data from a firebase server in real time: (Code from service)

getData(child){
        return firebase.database().ref(child).on('value', (snapshot) => {
            console.log(snapshot.val())
        })
    }

and subscribe to the above function in my component:

this.examinerService.getData('batches/names').subscribe(
      (batches) => {
        this.batches = batches.val();
      }
    )

Which gives me an error:

Property 'subscribe' does not exist on type '(a: DataSnapshot, b?: string) => any'

I tried using ref().once()one that works great, but I want real-time behavior.

: database().ref().on('value', (snapshots) => { console.log(snapshots.val()); }); , , . - , , . angular, , .

Answer 1

getData Observable, , -, . , Observable, .subscribe() .

import { Observable } from 'rxjs/Observable';

getData(child) {

  return Observable.create(subscriber => {
    const ref = firebase.database().ref(child);

    const callbackFn = ref.on('value',
      // emit a value from the Observable when firebase data changes
      (snapshot) => subscriber.next(snapshot.val()),

      // error out the Observable if there is an error
      // such as permission denied
      error => subscriber.error(error)
    );

    // The function passed to Observable.create can return a callback function
    // which will be called when the observable we created is unsubscribed from.
    // Just as we used `ref.on()` previously our callback function calls `ref.off`
    // to tell firebase that we are no longer interested in the changes
    return () => ref.off('value', callbackFn);
  });
}

Answer 2

, :

{
  batches: {
    names: [
      {
        first: 'FirstName',
        last: 'LastName'
      },
      {
        first: 'FirstName1',
        last: 'LastName1'
      }
    ]
  }
}

,

export interface Name { first: string; last: string; }

, :

import { Injectable } from '@angular/core';
import { Name } from "./name";
import { AngularFireDatabase, AngularFireList } from "angularfire2";


@Injectable()
export class NameService {

  constructor(private db:AngularFireDatabase) { }

  getAllNames(): AngularFireList<Name> {
      return this.db.list('batch/name');
  }

}

:

import { Component, OnInit } from '@angular/core'
import { AngularFireList } from "angularfire2";

@Component({
  selector: 'app-name-list',
  template: `
  <div *ngFor="let name of names$">
    {{ name.last }}, {{ name.first }}
  </div>
`
})

export class NameListComponent implements OnInit {
  names$: AngularFireList<Name>;

  constructor(private nameService: NameService) {}

  ngOnInit() {
    this.names$ = nameService.getAllNames();
  }
}

Angular websockets . , , , .

Answer 3

.subscribe() , Observable. DataSnapshot .

getData(child){
    return firebase.database().ref(child);
}

this.examinerService.getData('batches/names').on('value', (snapshot) => {
        console.log(snapshot.val())
    })