1

我正在为我的一个项目使用 angular 2 fullcalendar。只要我在渲染日历之前准备好数据，一切都可以正常工作。如果触发事件并且数据来自后端，我在使用 refetch 功能时会遇到问题。我会首先解释代码并描述错误。我已经安装

npm install fullcalendar

npm i angular2-fullcalendar

npm install jquery

npm install moment

在 app.module.ts

我已经进口了

import {CalendarComponent} from "angular2-fullcalendar/src/calendar/calendar";

我在声明中声明：[]

在 html 中，我正在使用显示日历

<div class="ui red segment" *ngIf="dataAvailable">
<angular2-fullcalendar [options]="calOptions" id="mycal" #mycal>
</angular2-fullcalendar>
</div>

在我拥有的组件中

import {CalendarComponent} from 'angular2-fullcalendar/src/calendar/calendar';
import {Options} from 'fullcalendar';

declare var $:any;
import * as moment from "moment";

我对标签有一个参考

 @ViewChild('mycal', { read: ElementRef }) myCal: ElementRef;

我的日历配置看起来像

 calOptions: any = {
        height:350,
        defaultDate: moment(new Date(),'YYYY-MM-DD'),
        editable: false,
        stick:true,
        
        events:this.events,
        selectable:false,
        eventLimit: true, // allow "more" link when too many events
        header: {
                  left: 'month basicWeek basicDay',
                  center: 'title',
                  right: 'today prev,next'
                },
        displayEventTime: false,
        addEventSource:this.events,
        defaultView:'basicWeek',
       
        dayRender: (date, cell)=> {
                        var today = moment().format("YYYY-MM-DD");
                    //    today = moment(today).toDate();
                        
                        for(let item of this.holidayList){
                        
                        if(item.holidayDate === moment(date).format("YYYY-MM-DD"))
                        {
                         cell.css("background-color", "#e4564a");
                         
                        }
                        }
          } 
  };

问题

现在，如果我尝试，当新数据出现时

$(this.myCal.nativeElement).fullCalendar('addEventSource', events)

它给出了一个错误说

无法读取未定义的属性“nativeElement”

如果我尝试使用

$('#mycal').fullCalendar('refetchEventSources',this.events);

它给出了错误

引起：$(...).fullCalendar 不是函数

如果我使用

$('angular2-fullcalendar').fullCalendar('refetchEventSources',this.events);

同样的错误来了。我做错了什么？请帮忙。我真的卡住了；

更新

我做了我做了

@ViewChildren('mycal') cal: QueryList<CalendarComponent>

在新数据到来之后，在我所做的订阅方法中，

this.cal.forEach(div => 
  {
    div.fullCalendar('removeEventSource', this.events);
     div.fullCalendar('addEventSource', this.events);
      div.fullCalendar('refetchEvents');

  }

现在，当新数据到来时，旧数据不会从视图中删除，而是附加到现有视图中。

4

2 回答 2

4

你让它太复杂了：

 @ViewChild('mycal') calendar : CalendarComponent;

然后每当你想刷新你只需调用：

this.calendar.fullCalendar('refetchEvents');

当您的 html 中似乎只有 1 个日历时，我不知道为什么要调用 ViewChildren 来获取一组日历。

于 2017-12-15T15:50:37.753 回答
1

那是因为您使用的是*ngIf，您的元素可能存在或不存在。

而不是使用@ViewChild('mycal')您应该考虑使用@ViewChildren('myCal')并订阅QueryList.changes Observable：

@ViewChildren('myCal')
cal: QueryList < ElementRef > ;

ngAfterViewInit() {
  this.cal.changes
    .startWith(this.cal)
    .filter(list => list.length > 0)
    .subscribe(list => {
      console.log(list.first);
    })
}
于 2017-08-02T14:16:12.833 回答