Question

我正在开发一个离子应用程序，我想与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(),
        }));
      });
  }
}

我可以成功检索模板文件中的数据，但是如何从home.ts访问firebase数据库中的值？在Firebase中，我每个月都有会议名称和时间。例如。 7月，团队简介会在上午10点举行。我如何在home.ts中获取上午10点的值来使用和操作？

谢谢

Firebase JSON文件片段：

[ { "days" : [ { "StaffBriefing" : "10:00", "Team A Meeting" : "11:30", "Team B Meeting" : "13:00", "Team C Meeting" : "15:30", "Date" : "01" }, { "StaffBriefing" : "14:00", "Team A Meeting" : "12:45", "Team B Meeting" : "14:00", "Team C Meeting" : "16:30", "Date" : "02" }, { "StaffBriefing" : "09:00", "Team A Meeting" : "14:00", "Team B Meeting" : "11:00", "Team C Meeting" : "15:30", "Date" : "03" } ], "monthName" : "January" } ]

更新-03/08/2018

是的，我在this.UHSGetMonths$之后添加了订阅代码。但是，以下代码有效：

`this.JubileeMonths
  .getJubileeMonthsList() // DB LIST
  .valueChanges()
  .subscribe(data => {
    console.log(data);
 });`

然后console.log(data)显示：

如果我这样做 console.log（data [0]）; ，我明白了，没事。

但是，如果我尝试执行 console.log（data [0] .monthName）; ，我在代码编辑器（Atom）中遇到错误，即**属性'monthName'不存在键入'{}'`，但在控制台中输入的是一月份的正确值。

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

谢谢。

UHSGetMonthsService

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$;
      }

    }

Answer 1

鉴于您的数据库结构，您可以在设置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()的当月名称，则需要使用this post的解决方案或momentjs。
如果要获取当月的当前日期，可以再次使用new Date().getDate()或momentjs。

更新：

由于没有定义返回数据的“形状”而收到错误，据您的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;
  }
}

从Firebase读取数据

1 个答案: