Clash Royale CLAN TAG#URR8PPP

AngularFirebase not reading data from database and displaying in HTML

So I have a firebase DB, and I am trying to read data from it and display it on a webpage.

This is my typescript file

import Component from '@angular/core';
import NavController, NavParams from 'ionic-angular';
import AngularFireDatabase, AngularFireList from 'angularfire2/database';
import Observable from '../../../node_modules/rxjs';

@Component(
selector: 'page-course',
templateUrl: 'course.html'
)
export class CoursePage
courses: AngularFireList<any>;
public Course= ;
constructor(public navCtrl: NavController, private navParams: NavParams, public afDB: AngularFireDatabase)
let id = navParams.get('id');
this.courses = this.afDB.list('/courses');





and this is my html

<ion-header>
<ion-navbar>
<ion-title>
Select Your Course!
</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-list>
<ion-item class="text" *ngFor="let course of courses$ | async">
course.title
</ion-item>
</ion-list>
</ion-content>


This code makes sense because the variable 'courses' is the courses collection from the database, and in my HTML, I am displaying the title of each course from courses (the db). But, I am just met with a white screen, no errors, just nothing happening. Can someone explain what is happening?

1 Answer
1

You need to call valueChanges() or snapshotChanges() on this.afDB.list('/courses').

valueChanges()

snapshotChanges()

this.afDB.list('/courses')

Check the docs for more information:

valueChanges()

What is it? - Returns an Observable of data as a
synchronized array of JSON objects. All Snapshot metadata is stripped
and just the method provides only the data.

Why would you use it? - When you just need a list of data. No snapshot
metadata is attached to the resulting array which makes it simple to
render to a view.

When would you not use it? - When you need a more complex data
structure than an array or you need the key of each snapshot for data
manipulation methods. This method assumes you either are saving the
key for the snapshot data or using a "readonly" approach.

snapshotChanges()

What is it? - Returns an Observable of data as a
synchronized array of AngularFireAction.

Why would you use it? - When you need a list of data but also want to
keep around metadata. Metadata provides you the underyling
DatabaseReference and snapshot key. Having the snapshot's key around
makes it easier to use data manipulation methods. This method gives
you more horsepower with other Angular integrations such as ngrx,
forms, and animations due to the type property. The type property on
each AngularFireAction is useful for ngrx reducers, form states, and
animation states.

When would you not use it? - When you need a more complex data
structure than an array or if you need to process changes as they
occur. This array is synchronized with the remote and local changes in
the Firebase Database.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.