Angular2 FullCalendar回调不可访问的属性

Question

我有一个angular2应用程序，我有一个完整的日历组件。我想在使用eventClick回调单击完整日历事件时显示一个对话框。我有下面的代码来做这件事:

export class ScheduleComponent implements OnInit{
events: CalendarEvent[];
display: boolean;
tables: SelectItem[];
selectedTable: string;
ngOnInit(){
    this.display = false;
    this.scheduleService.GetAllEvents().subscribe((data: CalendarEvent[]) => 
            { 
                this.events = data;
                var calendar: JQuery = $("#calendar");
                (<any>calendar).fullCalendar({
                    eventClick: function(event) {
                        this.display = true;
                        return false;
                    }
                });
            });
}

}

这是一个非常简化的版本，但应该提供所有需要的信息。

我的问题是eventClick回调中的this.display = true行似乎无法看到display属性。

有谁知道为什么这是和我怎么能解决它吗?

谢谢,

Answer 1

通常在发布问题后，我现在已经制定了一个解决方案。

对于其他在这个问题上挣扎的人来说，解决方案是使用'fat arrow'符号。

所以不用这个:

eventClick: function(event) {
                        this.display = true;
                        return false;
                    }

我用的是:

eventClick: (event) => {
                        this.display = true;
                        return false;
                    },

我不太确定这是如何工作的，因为它只是试错。因此，如果有人知道为什么并且可以解释，那么我将非常有兴趣找出原因。

Answer 2

您面临的挑战与范围有关。在运行时，这个值会改变，因此显示将无法访问。

词法作用域是解决这个问题的方法之一，这就是你在上面所做的。

你还可以将方法的上下文绑定到this，以便在该上下文中执行。

你可以使用javascript的bind方法