Angular 4存入Firebase时遇Cannot read property 'push' of undefined错误求助

刚接触Angular和Firebase遇到这个报错太正常啦，我来帮你捋清楚问题出在哪以及怎么修复～

错误原因分析 #

你看到的Cannot read property 'push' of undefined，本质是你声明的employeeList变量只做了类型定义，但没有被初始化。当你尝试调用this.employeeList.push()时，它还是个undefined，自然会抛出这个错误。

修复步骤 #

你需要在EmployeeService的构造函数里，利用注入的AngularFireDatabase实例，把employeeList指向Firebase数据库中的具体节点，这样它就不再是undefined了。

修正后的完整示例代码 #

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database'
import { Employee } from '../../../models/employee.model';

@Injectable()
export class EmployeeService {
  employeeList: AngularFireList<any>;
  selectedEmployee: Employee = new Employee();

  // 构造函数中注入AngularFireDatabase并初始化employeeList
  constructor(private firebase: AngularFireDatabase) {
    // 这里绑定到Firebase的"employees"节点，你可以根据自己的需求修改节点名称
    this.employeeList = this.firebase.list('employees');
  }

  // 示例：添加员工的方法，现在可以正常调用push了
  addEmployee(employee: Employee) {
    this.employeeList.push({
      name: employee.name,
      position: employee.position,
      office: employee.office,
      salary: employee.salary
      // 字段请和你的Employee模型保持一致
    });
  }
}

额外注意事项 #

• 确保你的项目已经正确配置Firebase：在environment.ts中填写了Firebase的配置信息，并且在app.module.ts中导入了AngularFireModule.initializeApp(environment.firebase)和AngularFireDatabaseModule。
• 检查Firebase数据库的读写规则：开发阶段可以暂时设置为允许所有读写（方便调试），但上线前一定要修改为安全的规则，比如只允许认证用户读写。

内容的提问来源于stack exchange，提问作者intel QD