AngularFireDatabase的方法列表未从Angular中的Firebase返回数据

Question

我正在尝试从firebase db检索数据到angular应用程序。 如何从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 $具有快照更改，而courses2 $具有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$); 
 }

}

要访问和显示我在异步管道上使用* ngFor的课程元素

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

</ul>