从firebase接收服务中的事件

Question

我在我的组件中安装了一个完整的日历。现在我尝试接收保存在Firebase中的事件。因为我创建了服务事件。当我宣布对象manualy一切正常，但当我尝试从firebase接收这些数据我得到一个错误，也许有一些我没有看到。谢谢你的帮助。

错误：

错误TypeError：无法在SafeSubscriber._next中读取未定义的属性“id”

我的活动服务：

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Inject, Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Injectable()
export class EventService {

    eventsRef: AngularFireList<any>; 
    events$: Observable<any[]>;


    constructor(public db: AngularFireDatabase){}

    public getEvents(): Observable<any> {
        const dateObj = new Date();
        const yearMonth = dateObj.getUTCFullYear() + '-' + (dateObj.getUTCMonth() + 1);
        //Declaration of the array with events
        let data: any = [];

        //Receiving all events from the firebase table and pushing them to the array
        this.eventsRef = this.db.list('/events');
        this.events$ = this.eventsRef.valueChanges();
        this.events$.subscribe(events=> data.push(events));

        console.log(data);
        //Return the array to the component to render the events
        return Observable.of(data);
    }
};

我的组件：

import { MatDialog, MatSnackBar } from '@angular/material';
import { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';
import { EventService } from '../event.service';
import { Router } from '@angular/router';
import { AddEventDialogComponent } from '../add-event-dialog/add-event-dialog.component';
import { Calendar } from '@fullcalendar/core';
import resourceDayGridPlugin from '@fullcalendar/resource-daygrid';
import { Duration } from 'moment';

@Component({
  selector: 'app-agenda',
  templateUrl: './agenda.component.html',
  styleUrls: ['./agenda.component.css']
})
export class AgendaComponent implements OnInit {
  calendarOptions: Options;
  Duration: Duration;
  displayEvent: any;
   @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
   constructor(protected eventService: EventService, public dialog: MatDialog, public router: Router, private snackBar: MatSnackBar) { }

   calendarEl

   ngOnInit() {
    this.eventService.getEvents().subscribe(data => {

      console.log(data[0].id);
      this.calendarOptions = {
        editable: true,
        eventLimit: false,
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'agendaWeek,agendaDay'
        },
        defaultView: 'agendaWeek',
        events: data.filter( ev => ev.id == '999'),
        nowIndicator: true,
        slotDuration: '00:10',
        locale: 'nl',
        //minTime: '08:30:00',
        //maxTime: '23:00:00',
        //titleFormat: 'dddd, MMMM D, YYYY'
      }

    });

   }
   clickButton(model: any) {
     this.displayEvent = model;
   }
   eventClick(model: any) {
     model = {
       event: {
         id: model.event.id,
         start: model.event.start,
         end: model.event.end,
         title: model.event.title,
         allDay: model.event.allDay
         // other params
       },
       duration: {}
     }
     this.displayEvent = model;
   }
   updateEvent(model: any) {
     model = {
       event: {
         id: model.event.id,
         start: model.event.start,
         end: model.event.end,
         title: model.event.title
         // other params
       },
       duration: {
         _data: model.duration._data
       }
     }
     this.displayEvent = model;
   }

   addEvent(){
    const dialogRef = this.dialog.open(AddEventDialogComponent, {
      width: '400px',
      data: {},
    });

    dialogRef.afterClosed().subscribe(result => {

      console.log(result);

    });
   }
}

Answer 1

在subscribe中传递给this.events$.subscribe(events=> data.push(events));的回调被异步执行，这意味着在返回的时刻将不会填充data，即它仍然只是一个空数组。要解决这个问题，只需返回this.events$：

public getEvents(): Observable<any> {
        const dateObj = new Date();
        const yearMonth = dateObj.getUTCFullYear() + '-' + (dateObj.getUTCMonth() + 1);
        //Declaration of the array with events
        let data: any = [];

        //Receiving all events from the firebase table and pushing them to the array
        this.eventsRef = this.db.list('/events');
        this.events$ = this.eventsRef.valueChanges();
        return this.events$;
}