角度日历和不完整的渲染

Question

我在Angular 4.0上使用Angular Calendar模块。现在，我面临的问题是在向日历添加事件时日历的呈现不完整。当我单击事件时，日历会在一段时间后完全显示出来。我已经在互联网上对其进行了调查，发现它与变更检测有关，但是我无法实现它。

以下是我的代码：

  view: string = 'month';

  viewDate: Date = new Date();
  refresh: Subject<any> = new Subject();
  events = [];
  clickedDate: Date;

  constructor(private cd: ChangeDetectorRef) { }


  ngOnInit(): void {

    this.loadEvents();

  }

  loadEvents(): any {

    let data = [{
      title: 'Editable event',
      color: colors.yellow,
      start: new Date(),
      actions: [
        {
          label: '<i class="fa fa-fw fa-pencil"></i>',
          onClick: ({ event }: { event: CalendarEvent }): void => {
            console.log('Edit event', event);
          }
        }
      ]
    },
    {
      title: 'Deletable event',
      color: colors.blue,
      start: new Date(),
      actions: [
        {
          label: '<i class="fa fa-fw fa-times"></i>',
          onClick: ({ event }: { event: CalendarEvent }): void => {
            this.events = this.events.filter(iEvent => iEvent !== event);
            console.log('Event deleted', event);
          }
        }
      ]
    },
    {
      title: 'Non editable and deletable event',
      color: colors.red,
      start: new Date()
    }
    ];


    for (let d of data) {
      this.events.push(d);

    }

    this.cd.detectChanges();
    this.refresh.next();
  }//load events end

HTML代码：

<div class="container">
    <div class="row text-center">
        <div class="col-md-4">
          <div class="btn-group">
            <div
              class="btn btn-primary"
              mwlCalendarPreviousView
              [view]="view"
              [(viewDate)]="viewDate"
              (viewDateChange)="activeDayIsOpen = false">
              Previous
            </div>
            <div
              class="btn btn-outline-secondary"
              mwlCalendarToday
              [(viewDate)]="viewDate">
              Today
            </div>
            <div
              class="btn btn-primary"
              mwlCalendarNextView
              [view]="view"
              [(viewDate)]="viewDate"
              (viewDateChange)="activeDayIsOpen = false">
              Next
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
        </div>
        <div class="col-md-4">
          <button class="btn btn-primary" (click) = 'redirectToAddMeeting()'> Add Meeting</button>

        </div>
    </div> 

  <mwl-calendar-month-view 
    [viewDate]="viewDate"
    [events]="events"
    [activeDayIsOpen]="true">
  </mwl-calendar-month-view>
</div>