CODEWITHSUNDEEP
angulartypescript
Shan-Desai
Shan-Desai

Reputation: 3349

resolving scope of private method call within a function in another private method for typescript

Framework: Angular 5.x

Structure is as follows:

ngAfterViewInit() {
   // ... Some svg rendering code
   function dblclick(d) {
       d3.select(this).select('circle').transition()
         .duration(1000)
         .attr('r', 14);

       this.makeJsonBackEnd(d); // in the browser console this is not a function error
   }
}

makeJsonBackEnd(node) {
 // extract info from d3 node to make a JSON for backend
}

I think because of the function within the ngAfterViewInit() the scope of the Component class is messed up and this is not recognized.

How can I call makeJsonBackEnd() within the dblclick()?

I tried making dblclick a private method for the class but the this call within d3.select(this) won't get recognized

Upvotes: 0

Views: 425

Answers (2)

ngChaitanya
ngChaitanya

Reputation: 435

You could try turning dblclick method into Arrow function like below 

dblclick = d => { .... };

or the traditional way of holding this scope into local var. let me = this, and call the method with me.makeJsonBackEnd(d) like below

ngAfterViewInit() {
    let me = this;
    function dblclick(d) {
        ...
        me.makeJsonBackEnd(d)
        ...
    }
 }

Upvotes: 1

user4676340
user4676340

Reputation:

Use a closure.

ngAfterViewInit() {
   const self = this;
   // ... Some svg rendering code
   function dblclick(d) {
       d3.select(this).select('circle').transition()
         .duration(1000)
         .attr('r', 14);

       self.makeJsonBackEnd(d); // in the browser console this is not a function error
   }
}

makeJsonBackEnd(node) {
 // extract info from d3 node to make a JSON for backend
}

Upvotes: 1

Related Questions