AngularFireDatabase's method list not returning data from firebase in Angular

Question

I am trying to retrieve the data from firebase db to angular application. How to retrieve the 'course' data from firebase?

My app.component.ts is as below

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList} from 'angularfire2/database';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
export class AppComponent {
title = 'firebase-demo';
courseList:AngularFireList<[]>;
courses$;
course$;
constructor(db:AngularFireDatabase){
   this.courseList=db.list('/courses');
   this.course$=this.courseList.valueChanges()
     .subscribe(cousres=>{
      console.log(this.course$);
    })

  }
}

Firebase Db structure. courses C-01: "01" C-02: "02" C-03: "03"

the console.log is giving following output => Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …} — vishal M
– vishal M, Commented Oct 6, 2018 at 19:16
There is a typo in your sourcecode in your subscribe call. And there is a lot of info we are missing. Do you have a valid connection to the database, do you receive errors on your console? Edit your question, to make and keep it valuable for others. — Bert Verhees
– Bert Verhees, Commented Oct 7, 2018 at 6:56
Hi Bert, I have valid connection to db and find the way to display the content of db in list. will share the updated code. thanks! — vishal M
– vishal M, Commented Oct 7, 2018 at 18:30

vishal M · Accepted Answer · 2018-10-07 18:52:01Z

I have done changes into the code and and came up with following approach. here courses1$ has snapshotChanges & courses2$ has valueChanges.

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList} from 'angularfire2/database';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
 title = 'firebase-demo';
 courseList:AngularFireList<any[]>;
 courses1$;
 courses2$;
 course$;
 constructor(db:AngularFireDatabase){
 this.courseList=db.list('/courses');

 const itemsRef: AngularFireList<any[]>=db.list('/courses');
 this.courses1$ = itemsRef.snapshotChanges();
 this.courses2$ = itemsRef.valueChanges();
 console.log(this.courses1$); 
 }

}

To access and display the course elements i have used *ngFor with Async pipe

<ul>
  <li *ngFor=" let course1 of courses1$ | async">{{course1.key}}</li>
  <!-- <li *ngFor=" let course2 of courses2$ | async">{{course2}}</li> -->

</ul>

Collectives™ on Stack Overflow

AngularFireDatabase's method list not returning data from firebase in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related