来自 Firestore 的完整日历事件数据未显示

Question

我正在尝试从 Firestore 加载数据以在 Angular 应用程序中显示在 Fullcalendar 中。但是数据没有显示，当我硬编码事件数据时，它显示了。

日历事件的界面。

export interface Events {
  allDay: boolean;
  className?: string;
  end: Date;
  start: Date;
  title: string;
  url?: string;
  description: string;
  icon?: string;
}

在 calendar.component.ts 中

  calendarevent: Events[] = [];
  constructor(db: AngularFirestore) {
   db.collection('events').get().forEach(collection => {
      collection.forEach(events => {
        return calendarevent.push(events.data());
      });
    });
   
}


ngOnInit() {

    this.calendarOptions = {
      plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin],
      editable: true,
      droppable: true,
      dragScroll: true,
      timeZone: 'GMT',
      events: this.calendarevent,
      
      headerToolbar: {
        left: 'title,prev,next',
        center: 'dayGridMonth,timeGridWeek,timeGridDay',
        right: 'today'
        // left: 'prev,next today ]',
        // center: 'title',
        // right: 'dayGridMonth'
      },


      dateClick: this.handleDateClick.bind(this),
      eventClick: this.handleEventClick.bind(this),
      eventDragStop: this.handleEventDragStop.bind(this)
    };

    // this.fullcalendar.on('dateClick', () => {
    //   this.openDialog();
    // });
  }

控制台中的 Firestore 数据

[]
0: {className: "event-azure", allDay: true, start: t, title: "BD-pro Launch"}
1: {icon: "circle", start: "2019-07-07", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", title: "Barber", className: "fc-bg-default", …}
2: {end: "2019-09-14", icon: "birthday-cake", start: "2019-09-13", title: "Birthday", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", …}
3: {start: t, allDay: false, end: t, className: "event-azure", title: "Birthday Party"}
6: {description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", end: "2019-08-15", start: "2019-08-13", className: "fc-bg-blue", icon: "calendar", …}
7: {start: "2019-12-29T11:30:00", allDay: false, end: "2019-12-29T012:30:00", icon: "medkit", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", …}
8: {title: "Dinner", icon: "cutlery", end: "2019-11-15T22:30:00", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", start: "2019-11-15T20:00:00", …}
9: {start: "2019-08-08T14:00:00", className: "fc-bg-deepskyblue", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", end: "2019-08-08T20:00:00", title: "Flight Paris", …}
10: {end: "2019-12-27", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", className: "fc-bg-default", start: "2019-12-27", icon: "rocket", …}
11: {className: "event-red", title: "Lunch", end: t, start: t, allDay: false}
12: {title: "Meeting", start: "2019-08-12", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", icon: "suitcase", className: "fc-bg-lightgreen"}
13: {description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", icon: "glass", end: "2019-10-15T11:45:00", title: "Restaurant", start: "2019-10-15T09:30:00", …}
14: {end: "2019-08-25", title: "Shooting", className: "fc-bg-blue", icon: "camera", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", …}
15: {start: "2019-07-10T13:00:00", icon: "group", allDay: false, end: "2019-07-10T16:00:00", title: "Team Meeting", …}
16: {title: "Birthday Party", allDay: false, end: t, start: t, className: "event-azure"}
17: {title: "Flight Paris", start: "2019-08-08T14:00:00", end: "2019-08-08T20:00:00", icon: "cog", allDay: false, …}
18: {end: t, title: "Birthday Party", className: "event-azure", allDay: false, start: t}
length: 19
__proto__: Array(0)

硬编码事件数据

 events: [
          {
            title: 'All Day Event',
            start: new Date(y, m, 1),
            className: 'event-default'
          },
          {
            title: 'Meeting',
            start: new Date(y, m, d-1, 10, 30),
            allDay: false,
            className: 'event-green'
          },
          {
            title: 'Lunch',
            start: new Date(y, m, d+7, 12, 0),
            end: new Date(y, m, d+7, 14, 0),
            allDay: false,
            className: 'event-red'
          },
          {
            title: 'BD-pro Launch',
            start: new Date(y, m, d-2, 12, 0),
            allDay: true,
            className: 'event-azure'
          },
         
        ]

当我将硬编码事件绑定到 Fullcalendar 事件时，它可以正常工作，但 Firestore 中的数据无法正常工作。

Answer 1

所以我找到了一个解决方法，但我认为除此之外还有更好的解决方案，我发现日历是在数据加载完成之前呈现的，所以我必须用 setTimeOut 包装日历函数来延迟它，

  calendarEvents: Observable<Events[]>;
  private eventCollection: AngularFirestoreCollection<Events>;
 calendarevent: Events[] = [];

  constructor(db: AngularFirestore) {

    this.eventCollection = db.collection<Events>('events');
    this.calendarEvents = this.eventCollection.valueChanges();
    this.calendarEvents.subscribe(a => {
      a.map(b => {
        this.calendarevent.push(b);
      });
    });
  }

  ngOnInit() {
    setTimeout(() =>
      this.calendarOptions = {
        plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin],
        editable: true,
        droppable: true,
        dragScroll: true,
        timeZone: 'GMT',
        events: this.calendarevent,
        customButtons: {
          myCustomButton: {
            text: 'custom!',
            click() {
              alert('clicked the custom button!');
            }
          }
        },
        headerToolbar: {
          left: 'title,prev,next',
          center: 'dayGridMonth,timeGridWeek,timeGridDay',
          right: 'today'
        },


        dateClick: this.handleDateClick.bind(this),
        eventClick: this.handleEventClick.bind(this),
        eventDragStop: this.handleEventDragStop.bind(this)
      }

      , 3000);
  }