Question

我有一个angular2应用程序，其中我有一个完整的日历组件。我想使用class APIController extends BaseController { protected $statusCode = 200; // Fractal API Manager protected $fractal; protected $commandBus; public function __construct(ValidationCommandBus $commandBus, Manager $fractal) { // Init fractal manager $this->fractal = $fractal; $this->commandBus = $commandBus; }回调单击完整日历事件来显示对话框。我有以下代码来执行此操作：

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; } }); }); }回调中的this.display = true行似乎无法看到eventClick属性。

有谁知道这是为什么以及我如何解决它？

谢谢，

Answer 1

通常在发布问题后，我现在已经制定了一项决议。

对于任何正在努力解决这个问题的人来说，解决方法就是使用'胖箭'符号。

所以不要这样：

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

我用过这个：

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

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

Answer 2

您所面临的挑战与范围有关。在运行时，它的值会发生变化，因此无法访问显示内容。

词法范围是您解决此问题的方法之一，也就是您上面所做的事情。

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

您可以使用javascript绑定方法

执行此操作

Angular2 FullCalendar回调无法访问的属性

2 个答案: