Question

所以我有一个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');
  }

}

这是我的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”是数据库中的课程集合，在我的HTML中，我正在显示课程（数据库）中每个课程的标题。但是，我只是遇到一个白色的屏幕，没有错误，什么也没有发生。有人可以解释发生了什么事吗？

Answer 1

您需要在valueChanges()上致电snapshotChanges()或this.afDB.list('/courses')。

检查docs以获得更多信息：

valueChanges（）

这是什么？-返回一个Observable数据作为   JSON对象的同步数组。删除了所有快照元数据   而仅该方法仅提供数据。

为什么要使用它？-当您只需要数据列表时。没有快照   元数据被附加到结果数组，这使得它很容易   呈现给视图。

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

snapshotChanges（）

是什么？ -将数据的Observable返回为   AngularFireAction []的同步数组。

为什么要使用它？-当您需要数据列表但又想   保留元数据。元数据为您提供基础知识   DatabaseReference和快照键。拥有快照的密钥   使使用数据操作方法更加容易。这种方法给   您可以通过其他Angular集成（例如ngrx）获得更大的功能，   表格和动画（归因于type属性）。的type属性   每个AngularFireAction对于ngrx缩减器，表单状态和   动画状态。

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

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

1 个答案: