从火力基地接收服务中的事件

Question

我的组件中安装了完整的日历。现在我尝试接收保存在Firebase中的事件。为此，我创建了服务事件。当我手动声明对象时，一切正常，但是当我尝试从Firebase接收这些数据时，出现错误，也许有些东西我没有看到。感谢您的帮助。

错误：

错误

类型错误： 无法读取未定义的属性"id" 在SafeSubscriber._next

我的活动服务：

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

在 this.events$.subscribe(events=> data.push(events)); 中传递给 subscribe 的回调是异步执行的，这意味着在返回的那一刻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$;
}