CODEWITHSUNDEEP
observableangular6
vishal M
vishal M

Reputation: 71

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

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

enter image description here

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"

Upvotes: 0

Views: 602

Answers (1)

vishal M
vishal M

Reputation: 71

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>

Upvotes: 1

Related Questions