Javascript Angular2 FullCalendar:渲染新事件时出现问题

我在创建新活动时遇到问题。 我的出发点是本教程：

教程本身运行良好，日历正在显示中。 但现在我尝试创建一个新事件，但从控制台收到一个错误： 试图对没有日历的元素调用FullCalendar方法。

此错误与此函数有关：

addNewEvent() {
    this.myCalendar.fullCalendar('renderEvents', this.myEvent);
  }

以及我的完整代码：

import { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarComponent} from 'ap-angular2-fullcalendar';
import * as $ from 'jquery';
import * as moment from 'moment';

@Component({
  selector: 'app-main-cal',
  templateUrl: './main-cal.component.html',
  styleUrls: ['./main-cal.component.css']
})
export class MainCalComponent implements OnInit {

  @ViewChild(CalendarComponent) myCalendar: CalendarComponent;

  myEvent = {
    title: 'my new event',
    allDay: true,
    start: '2018-01-30'
  };

    calendarOptions: Object = {

    editable: false,
    handleWindowResize: true,
    weekends: false,
    defaultView: 'agendaWeek',
    minTime: '08:00:00',
    maxTime: '20:00:00',
    columnFormat: 'ddd D/M',
    timeFormat: 'HH:mm',
    displayEventTime: true,
    allDayText: 'Ganztägig',

    events: [
      {
        title: 'All Day Event',
        start: '2016-09-01'
      },
      {
        title: 'Long Event',
        start: '2016-09-07',
        end: '2016-09-10'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2016-09-09T16:00:00'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2016-09-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2016-09-11',
        end: '2016-09-13'
      },
      {
        title: 'Meeting',
        start: '2016-09-12T10:30:00',
        end: '2016-09-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2016-09-12T12:00:00'
      }
    ]
  };

  constructor() { }

  ngOnInit() {
    this.addNewEvent();
    console.log(this.myCalendar);
  }



  addNewEvent() {
    this.myCalendar.fullCalendar('renderEvents', this.myEvent);
  }

  changeCalendarView(view) {
    this.myCalendar.fullCalendar('changeView', view);
  }


  onCalendarInit(initialized: boolean) {
    console.log('Calendar initialized');
  }

}

和HTML：

<angular2-fullcalendar [options]="calendarOptions" (initialized)="onCalendarInit($event)"></angular2-fullcalendar>

我想我在初始化日历时做错了什么，但我不知道是什么。 如果有人能帮助我，我将非常高兴。

您应该参考以下链接：