Angular | Access a variable in a function-CodePudding

I have a Chart JS plugin that returns an event when the user moves on the Chart. I would like to set the isOnDrag variable to true when the onDrag event occurs.

dragData: {
  dragX: true,
  onDragStart: function(e: Event) {
    console.log(e)
  },
  onDrag: function(e: Event, datasetIndex: any, index: any, value: { x: number; }) {
    this.isOnDrag = true; // I want to edit this global var
    value.x = new Date(value.x   43200000).setHours(0, 0, 0, 0);
  },
  onDragEnd: function(e: Event, datasetIndex: any, index: any, value: { x: number; }) {
    this.isOnDrag = false; // I want to edit this global var
  },
},

At the beginning of the script I define the variable like this :

isOnDrag: boolean = false;

The following code gives me this error :

TS2551: Property 'isOnDrag' does not exist on type '{ dragX: boolean; onDragStart: (e: Event) => void; onDrag: (e: Event, datasetIndex: any, index: any, value: { x: number; }) => void; onDragEnd: (e: Event, datasetIndex: any, index: any, value: { ...; }) => void; }'. Did you mean 'onDrag'?

CodePudding user response：

Either change the anonymous functions to fat arrow syntax

dragData: {
  dragX: true,
  onDragStart: (e: Event) => {
    console.log(e)
  },
  onDrag: (e: Event, datasetIndex: any, index: any, value: {
    x: number;
  }) =>  {
    this.isOnDrag = true; // I want to edit this global var
    value.x = new Date(value.x   43200000).setHours(0, 0, 0, 0);
  },
  onDragEnd: (e: Event, datasetIndex: any, index: any, value: {
    x: number;
  }) => {
    this.isOnDrag = false; // I want to edit this global var
  },
},

or .bind(this) to the functions.

dragData: {
  dragX: true,
  onDragStart: function(e: Event) {
    console.log(e)
  }.bind(this),
  onDrag: function(e: Event, datasetIndex: any, index: any, value: {
    x: number;
  }) {
    this.isOnDrag = true; // I want to edit this global var
    value.x = new Date(value.x   43200000).setHours(0, 0, 0, 0);
  }.bind(this),
  onDragEnd: function(e: Event, datasetIndex: any, index: any, value: {
    x: number;
  }) {
    this.isOnDrag = false; // I want to edit this global var
  }.bind(this),
},

CodePudding user response：

change your function definition. You need to define your functions as an Arrow function:

dragData: {
  dragX: true,
  onDragStart: (e: Event) => {
    console.log(e)
  },
  onDrag:(e: Event, datasetIndex: any, index: any, value: { x: number; }) => {
    this.isOnDrag = true; // I want to edit this global var
    value.x = new Date(value.x   43200000).setHours(0, 0, 0, 0);
  },
  onDragEnd:(e: Event, datasetIndex: any, index: any, value: { x: number; }) => {
    this.isOnDrag = false; // I want to edit this global var
  },
},

As I understand Your isOnDrag property is defined in your class. when you are defining your functions in regular way function name() {} inside the Object. The this property is the object where the function is defined.