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

Question

我正在尝试从 Firestore 加载数据以在角度应用程序中的全日历中显示。但是数据没有显示，当我对事件数据进行硬编码时，它会显示出来。

日历事件的界面。

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

在日历内部.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();
// });
}

在控制台中恢复数据

[]
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'
},

]

当我将硬编码事件绑定到完整日历事件时，它工作正常，但来自 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);
}