Anular5 - "this" not working within ready()

Question

I have a graph.component.ts

this.cContainer = cytoscape ( {  
    ready: function(e) { 
      this._dataService.setResultData();
    }
  });

but I get ERROR TypeError: Cannot read property 'setResultData' of undefined

..so this seems to be unknown, which looks correct because I am within a callback and so this is referred to the ready-callback.

but how would I call _dataService.setResultData() from inside this ready()-callback?

score 3 · Accepted Answer · answered Feb 19 '18 at 14:16

3

Use an arrow function to capture this from the declaring context. For function this is determined by the caller and will probably not be your class:

this.cContainer = cytoscape ( {  
    ready: (e) => { 
      this._dataService.setResultData();
    }
  });

answered Feb 19 '18 at 14:16

Titian Cernicova-Dragomir

230,986
31
415
357

score 1 · Answer 2 · answered Feb 19 '18 at 14:17

There is a difference regarding this between functions and fat-arrow ES6 functions. The latter version doesn't loose this. So instead of the current function you can use

ready: e => this._dataService.setResultData();

Edit: it could also be ready: function(e) { this._dataService.setResultData(); }.bind(this)

but it is just ugly...

Anular5 - "this" not working within ready()

2 Answers2

Linked