Oops! There seems to be a mistake: Unable to access the 'helpers' property of an undefined object

Click here to see my code

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'm facing an issue where I can't access my helper service function inside the eventDrop method. It shows as undefined when trying to update the schedule after dropping the event onto a specific date. The error message reads, "ERROR TypeError: Cannot read property 'helpers' of undefined".

Update: added additional lines of code to clarify my question.

Answer №1

Clearly demonstrate I will pinpoint your definition of the object you possess,...

    eventDrop: function(info) { /* this is where your error lies */
      /*
      using the 'function' keyword, this points to the function object in JS, therefore
      to correct it, you should switch to arrow function...
      */
      if (!confirm("Are you certain about this modification?")) {
        info.revert();
      } else{
        this.helpers.update_sched(info.event);
      }
    },

This is how it would appear with an arrow function.

eventDrop: (info) => { /* this is where your error lies */
      /*
      using the 'function' keyword, this points to the function object in JS, therefore
      to correct it, you should switch to arrow function...
      */
      if (!confirm("Are you certain about this modification?")) {
        info.revert();
      } else{
        this.helpers.update_sched(info.event);
      }
    },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The execution of the start script has encountered an error

Angular: 5.0.1 / Angular CLI: 1.5.0 / Node: 8.9.1 / npm: 5.5.1 / Os: win32 x64 Executed "npm start" in the terminal/command prompt and encountered the following error. I have been struggling to fix it for a whole day with no success. Can anyone assist me ...

Extracting IDE autocomplete in a Vue.js component can greatly improve your workflow and efficiency

Currently, I am in the process of developing a component library for the organization where I work. To achieve this, I am utilizing vuetify in combination with vue.js. One of the tasks at hand is to create custom components such as company-autocomplete, w ...

How to retrieve a document with Angular 6 and Spring REST services

I am facing an issue while trying to download a file from a REST API using Angular 6 Back-end Method @RequestMapping(value = "/print/{id}") public ResponseEntity<byte[]> generateReport(@PathVariable("id") long id_project){ Map<Stri ...

React Native Async Storage: displaying a blank page issue

I am facing an issue while attempting to save my data locally using AsyncStorage, specifically with the getData method. const storeData = async (value: string) => { //storing data to local storage of the device try { await AsyncStorage.setItem(& ...

Issues with Angular JS and Ionic Controller functionality not functioning correctly

I am having an issue where my controller in controller.js is not being called when I click on a button with ng-click in index.html. Any assistance would be greatly appreciated. My technology stack includes AngularJS 1 and the Ionic framework. Below are th ...

Verifying whether a new element already exists in a TypeScript array

In my programming class, I have defined properties like this: id: number; motorcycleId: number; brand: string; model: number; year: string; isDeleted: boolean; Within my component, there is an array containing instances of this model: motorcyclesList: ...

While using the ionic serve command

Every time I attempt to execute Ionic, an error is triggered. Your assistance is greatly appreciated. Interestingly, the AppData file has been erased as well! 'ionic' is giving me this message: "not recognized as an internal or external command ...

Steps for inserting a dropdown menu into a kendo grid

Hey there, I'm currently working on adding a drop-down list to a kendo-grid column but I'm facing an issue where the data is not loading into the drop-down list. My goal is to populate the data from an array. Here's the code snippet from t ...

Is it possible to open a PDF file in a new tab using Angular 4?

When attempting to open a PDF file using the window.open() function, I encountered an issue where the window would open and close automatically, causing the file to be downloaded rather than displayed in a new tab. Despite not having any ad blockers inst ...

.observe({ action: (response) => { this.updateData = response.Items; }. what comes after this

I need some guidance on what comes next within the callback function .subscribe({ next: (data) => { this.newData = data.Items; } ...

Using TypeScript to automatically deduce the output type of a function by analyzing the recursive input type

I am currently working on developing an ORM for a graph database using TypeScript. Specifically, I am focusing on enhancing the "find" method to retrieve a list of a specific entity. The goal is to allow the function to accept a structure detailing the joi ...

Issue encountered while setting up Ngb Module (Bootstrap) in Angular

Looking to add Ngb to an Angular project. Running Node.js version v19.1.0 and have attempted --force and --legacy-pear-drops. Also tried reinstalling Node.js. Error log: `npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While r ...

What is the best approach to implementing self-referencing type validation in TypeScript?

I am working on creating a specific type that guarantees all fields listed in the requiredFields array are included in the defaults object. The goal is to have defaults trigger type errors if any of the names from requiredFields are missing, and if the va ...

Ever tried asynchronous iteration with promises?

I have a specific code snippet that I am working on, which involves registering multiple socketio namespaces. Certain aspects of the functionality rely on database calls using sequelize, hence requiring the use of promises. In this scenario, I intend for t ...

JavaScript Class Emit Signal for establishing a sequence of interconnected events

My Vue project includes a JavaScript class specifically for mobile devices. I'm looking to have this class emit a signal once the property 'hasEnded' is set to True for my object. How can I achieve this and chain together other events based ...

Struggling to implement cookie functionality in Go language

I've been trying to figure out the issue by watching videos like this one and checking out this link. There's also a similar question on Stack Overflow This is the code I've been working with: func articlesHandler(w http.ResponseWriter, r * ...

Determining if there is a common element in two arrays to yield a true outcome

In my Ionic app built with Angular 1.x, I am dealing with two arrays containing numbers: var arr1 = [1,32,423,43,23,64,232,5,67,54]; var arr2 = [11,32,1423,143,123,64,2232,35,467,594]; The common numbers in these arrays are 32 and 64. I need a JavaScript ...

"Troubleshooting: Why Angular2's ngOnChanges is not triggering with array input

I am currently using a ParentComponent to pass inputs to a ChildComponent. When the input is a number, the ngOnChanges hook successfully fires. However, when it's an array, the hook does not trigger. Could someone help me identify what I might be doi ...

Navigating the maze of Material UI in React with TypeScript

I have a functioning code, but I am trying to incorporate Material UI into it. However, when I replace 'input' with 'TextField', I encounter the following error: Uncaught (in promise) Error: Request failed with status code 422 at cr ...

Enabling Event bus suggestions for Typescript: A step-by-step guide

Hello, I've encountered an issue while attempting to add types for the TinyEmitter library. Specifically, I need to define two methods. First: addEventListener(e: string, (...args: any[]) => void): void; Second: emit(e: string, ...args: any[]): vo ...