Question

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

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');

  }

现在，当新数据出现时，旧数据不会从视图中删除，但会附加现有视图。

Answer 1

你太复杂了：

 @ViewChild('mycal') calendar : CalendarComponent;

然后，只要你想刷新，你只需致电：

this.calendar.fullCalendar('refetchEvents');

我不知道为什么要调用ViewChildren来获取一系列日历，而你的html中只有1个日历。

Answer 2

那是因为您使用的是*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);
    })
}

angular 2 fullcalendar，refetchEvents无效（完整日历不是函数错误）

2 个答案: