从服务中获取时，不会更新angular2 fullcalender事件。 HTTP

我在npm install ap-angular2-fullcalendar –save的帮助下使用Angular4中的fullcalendar 。 在组件中硬编码的事件会立即显示在日历中。 但是当我从服务方法即HTTP调用中获取时。 收到事件后，我正在更新日历事件，如

template： {{options | json}}> {{options | json}}>

  getCalendarOptions() { let calendarOptions = { header: { left: '', center: 'title', right: 'month,agendaWeek,agendaDay,today,listYear prev,next ' }, dayClick: (date, jsEvent, view) => { }, slotDuration: '00:20:00', color: '#456778', height: 650, defaultView: 'agendaDay', slotLabelFormat: 'h(:mm)a', businessHours: { start: '11:00', end: '12:00', dow: [1, 2, 3, 4, 5] }, minTime: "09:00:00", maxTime: "20:00:00", fixedWeekCount: false, defaultDate: new Date(), editable: true, eventLimit: true, selectable: true, nowIndicator :true, selectHelper: true, viewRender:( view, element )=>{ console.log("ViewRender: "+view.start +" ele:" +view.end) }, select: (start, end, allDay) => { }, views: { agenda: { eventLimit: 2 } }, eventClick: (calEvent, jsEvent, view) => { }, hiddenDays: [], events: (start, end, timezone, callback)=>{ //**This place Service is being called to fetch events from server.** this.appointmentService.getMonthEvents(start,end,'view').subscribe( res=>{ this.events=res // this.myCalendar.fullCalendar('refetchEventSources', this.events); this.myCalendar.fullCalendar('renderEvents', this.events, 'stick') console.log("Cal")} ) } }; return (calendarOptions); } 

但事件未在完整日历中更新。 它们在单击其他日历视图后出现。 如何在事件可用后立即更新事件。

Answer 1

使用callback函数应该适合您：

view.html

component.ts

 export class App { @ViewChild(CalendarComponent) myCalendar: CalendarComponent; calendarOptions: any; constructor(private appointmentService: CalendarService) {} ngOnInit() { this.calendarOptions = { height: '1000', fixedWeekCount : false, header: { left: '', center: 'title', right: 'month,agendaWeek,agendaDay,today,listYear prev,next ' }, defaultDate: '2016-09-12', editable: true, eventLimit: true, events: (start, end, timezone, callback)=> { this.appointmentService.getMonthEvents() .subscribe(res => callback(res)); // just call callback } }; } } 

Plunker示例