AngularFirebase不从数据库读取数据并以HTML显示

所以我有一个firebase数据库，我试图从中读取数据并将其显示在网页上

这是我的打字脚本文件

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

}

从'@angular/core'导入{Component}；
从“离子角度”导入{NavController，NavParams}；
从“angularfire2/database”导入{AngularFireDatabase，AngularFireList}；
从“../../../node_modules/rxjs”导入{Observable}”；
@组成部分({
选择器：“页面课程”，
templateUrl:'course.html'
})
出口类课程表{
课程：角斗士；
公共课程={}；
构造函数（公共navCtrl:NavController、私有navParams:navParams、公共afDB:AngularFireDatabase）{
让id=navParams.get（'id'）；
this.courses=this.afDB.list（“/courses”）；
}
}

这是我的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>

选择你的课程！
{{课程名称}

---

这段代码很有意义，因为变量'courses'是数据库中的courses集合，在我的HTML中，我显示了courses（db）中每个课程的标题。但是，我只是遇到了一个白色的屏幕，没有错误，只是什么都没有发生。有人能解释一下发生了什么吗？

你需要调用

this.afDB.list（'/courses'）

上的

valueChanges（）

或

snapshotChanges（）

有关更多信息，请查看：

valueChanges（）

它是什么？-将可观察到的数据作为 JSON对象的同步数组。将剥离所有快照元数据 而方法只提供数据

为什么要使用它？-当您只需要一个数据列表时。没有快照 元数据被附加到生成的数组中，这使得 渲染到视图

您什么时候不使用它？-当您需要更复杂的数据时 结构而不是数组，或者您需要数据的每个快照的键 操作方法。此方法假定您正在保存 快照数据的键或使用“只读”方法

快照更改（）

这是什么将可观察到的数据作为 AngularFireAction[]的同步数组

您为什么要使用它？-当您需要数据列表但又想 保留元数据。元数据为您提供了underyling 数据库引用和快照键。将快照的密钥放在周围 使数据操作方法的使用更加容易。这种方法给出了 您可以通过其他角度积分（如ngrx）获得更大的马力， “类型”属性导致的窗体和动画。上的类型属性 每个AngularFireAction对于ngrx还原程序、形态状态和 动画状态

您什么时候不使用它？-当您需要更复杂的数据时 结构而不是数组，或者如果需要在更改时进行处理 发生。此阵列与中的远程和本地更改同步 Firebase数据库

---

打开控制台，看看会出现哪些错误？