Список методов AngularFireDatabase не возвращает данные из базы данных в Angular

Question

Я пытаюсь получить данные из базы данных firebase в угловое приложение.Как получить данные курса из базы данных?

Мой app.component.ts такой, как показано ниже

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 структура.курсы C-01: "01" C-02: "02" C-03: "03"

Answer 1

Я внес изменения в код и предложил следующий подход.здесь courses1 $ имеет снимок Изменения и курсы2 $ имеет значение Изменения.

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$); 
 }

}

Для доступа и отображения элементов курса, которые я использовал * ngFor с асинхронным каналом

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

</ul>