Angularjs 从Firebase读取数据

我正在开发一款ionic应用程序，我想与firebase集成。我的home.ts文件中有以下代码：

export class HomePage {
  UHSGetMonths$: Observable < any[] > ;

  constructor(public navCtrl: NavController,
    public platform: Platform,
    private screenOrientation: ScreenOrientation,
    private UHSMonths: UHSGetMonthsService,
    public actionSheetCtrl: ActionSheetController,
    private localNotifications: LocalNotifications,
    public alertCtrl: AlertController) {

    this.platform.ready().then((ready) => {
      this.localNotifications.on('tap', (notification, state) => {
        let json = JSON.parse(notification.data);

        let alert = this.alertCtrl.create({
          title: notification.title,
          subTitle: json.fullMsq
        });
        alert.present();
      });
    });

    //this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);

    this.UHSGetMonths$ = this.UHSMonths
      .getUHSMonthsList() // DB LIST
      .snapshotChanges() // Give access to both Key and Value
      .map(changes => {

        return changes.map(c => ({
          key: c.payload.key,
          ...c.payload.val(),
        }));
      });
  }
}

并且

console.log（数据）

显示：

如果我做了console.log（数据[0]）我明白了，这很好

但是，如果我尝试执行console.log（数据[0].monthName）我在代码编辑器（Atom）中得到一个错误，即类型“{}”上不存在*属性“monthName”，但在控制台中我得到了正确的一月值

为什么代码编辑器中出现了错误，或者我做的都是错的

谢谢

uhsgetmonthservice

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import * as moment from 'moment';

    @Injectable()
    export class UHSGetMonthsService {
    private UHSGetMonthsRef$ = this.fbDB.list('UHS/Calendar/months');

      constructor(private fbDB: AngularFireDatabase) {

      }

      getUHSMonthsList() {
        return this.UHSGetMonthsRef$;
      }

    }      

---

根据您的数据库结构，您可以在设置

UHSGetMonths$

后执行此操作：

this.UHSGetMonths$
  .subscribe(months => {
    if (months && months.length) {
      let month = months.find(m => m.monthName === 'January');
      let day = month.days.find(d => d.Date === '02');
      console.log(day['Team C Meeting']);
    }
  });

如果要获取

.find（）

当前月份的名称，则需要使用的解决方案或。
如果要获取当月的当前日期，可以再次使用

new Date（）.getDate（）

更新：

您之所以会出现错误，是因为您尚未定义返回数据的“形状”，就您的IDE所知，它只是一个通用对象。要解决此问题，请创建一个与数据外观相匹配的接口，并在列表引用中使用它

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import * as moment from 'moment';

export interface Month {
  monthName: string;
  days: any[];
}

@Injectable()
export class UHSGetMonthsService {
private UHSGetMonthsRef = this.fbDB.list<Month>('UHS/Calendar/months');

  constructor(private fbDB: AngularFireDatabase) {
  }

  getUHSMonthsList() {
    return this.UHSGetMonthsRef;
  }
}

从'@angular/core'导入{Injectable}；
从“angularfire2/database”导入{AngularFireDatabase}；
从“时刻”导入*作为时刻；
出口接口月{
monthName:字符串；
天数：任何[]；
}
@可注射（）
出口级UHSGetMonthService{
私有UHSGetMonthsRef=此.fbDB.list（'UHS/日历/月'）；
构造函数（专用fbDB:AngularFireDatabase）{
}
getUHSMonthsList（）{
返回此文件。UHSGetMonthsRef；
}
}

你读了吗？是的，我看了文档和youtube教程，但似乎不明白怎么做。什么部分让你困惑？在解释如何读取数据时，接口非常简单。请尝试将接口放在订阅的返回值上

.subscribe（（数据：月[]）=>{

。您必须从

uhsgetmonthservice

导入

Month

。说到这一点，为什么您有一个完整的服务只是为了返回一个简单的列表引用？我建议将您的接口存储在一个目录中，每个接口都存储在各自的文件中，以保持它们的组织性，这样您就可以始终知道从何处导入它们。这样我就可以t:

Uncaught（承诺中）：TypeError:无法读取未定义的

的属性'subscribe'。只是想知道，

snapshotChanges（）

提供了对键和值的访问权限，那么我如何使用键来检索其值？您是否将订阅代码添加到您将

this.UHSGetMonths$

设置为可观察的代码之后？键和值都将与

一起同时返回。snapshotChanges（）

，您不需要重新查询，这将是多余的。我已经编辑了我的文章，并提供了更多详细信息。请参阅部分：更新-03/08/2018。感谢您的帮助，非常感谢。

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import * as moment from 'moment';

export interface Month {
  monthName: string;
  days: any[];
}

@Injectable()
export class UHSGetMonthsService {
private UHSGetMonthsRef = this.fbDB.list<Month>('UHS/Calendar/months');

  constructor(private fbDB: AngularFireDatabase) {
  }

  getUHSMonthsList() {
    return this.UHSGetMonthsRef;
  }
}