ERROR TypeError: Cannot read property 'helpers' of undefined

Issue

Click here to view my codes

import { OnInit } from '@angular/core';
import { HelpersService } from 'src/app/helpers.service';

@Component({
  selector: 'app-system-maintenance',
  templateUrl: './system-maintenance.page.html',
  styleUrls: ['./system-maintenance.page.scss'],
})
export class SystemMaintenancePage implements OnInit {

constructor(
public helpers : HelpersService,


 ) {}

  calendarVisible = false;
  calendarOptions: CalendarOptions = {
    headerToolbar: {
      center: 'prev,today,next',
      left: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay',
    },
    initialView: 'dayGridMonth',
    // initialEvents: INITIAL_EVENTS,
    weekends: true,
    editable: true,
    nextDayThreshold: '00:00:00',
    events: [
      {
        // Goes from 8pm to 10am the next day.
        title: 'Event 2',
        start: '2020-12-04T00:00:00',
        end: '2020-12-06T00:00:01',
        allDay : true,
        html : true,
      }
    ],
    eventDidMount: function(info) {
      /// console.log(info);
    },

    eventDrop: function(info) {
      /// alert(info.event.title + " was dropped on " + info.event.start.toISOString() + ' to '+ info.event.end.toISOString());
      if (!confirm("Are you sure about this change?")) {
        info.revert();
      }else{
        this.helpers.update_sched(info.event);
      }
    },
    selectable: true,
    displayEventTime : true,
    selectMirror: true,
    // dayMaxEvents: true,
  };

I cant use my function in helpers services inside eventDrop it says undefined. After Dropping the event to specific date it says "ERROR TypeError: Cannot read property 'helpers' of undefined"..

Edit : added some code text to my question.

Solution

do show clearly I will isolate your definition of the object you have,...

    eventDrop: function(info) { /* this is where your mistake is */
      /*
      with the keyword 'function', this refers to the function object from JS, so
      to fix it you need to change to arrow function...
      */
      if (!confirm("Are you sure about this change?")) {
        info.revert();
      } else{
        this.helpers.update_sched(info.event);
      }
    },

So in the arrow function way it will look like so.

eventDrop: (info) => { /* this is where your mistake is */
      /*
      with the keyword 'function', this refers to the function object from JS, so
      to fix it you need to change to arrow function...
      */
      if (!confirm("Are you sure about this change?")) {
        info.revert();
      } else{
        this.helpers.update_sched(info.event);
      }
    },

Answered By - ash.io