从Firebase数据库中读取和显示数据

时间:2017-12-30 03:13:50

标签: angular firebase

我正在尝试从firebase数据库中检索数据,并将数据存储在我班级定义的课程数组中。

到目前为止,我已经:

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {


  courses:any[];


  constructor(public afAuth: AngularFireAuth,private router:Router,private db:AngularFireDatabase) { }

  ngOnInit() {

    if(this.afAuth.auth.currentUser){


        var ref = this.db.database.ref('/courses');

        ref.on("value", this.gotData, function (error) {
          console.log("Error: " + error.code);
        });


    }else{      
      this.router.navigate(['/login']);
    }

  }

  gotData(data){
    var x = data.val();
    console.log(x);
    this.courses = x; // >>>>>>>>>>>>>>>>>  ISSUE HERE
  }


}

但是我收到此错误说:

  

FIREBASE警告:用户回调引发了异常。类型错误:   无法设置属性' course'为null

  

错误类型错误:无法设置属性' course'为null

我能够成功控制日志数据..但我想存储这些数据..我该怎么做?

2 个答案:

答案 0 :(得分:1)

您需要初始化课程

 courses:any[] = [];

答案 1 :(得分:1)

错误消息告诉您this为空。要确保将其保留,请将gotData定义为箭头函数:

gotData = (data) => {
   this.courses = data.val();
}