Trouble binding 'this' Angular / Javascript

Question

Basically I'm trying to use this package pullToRefresh in my Angular application.

The code is as follows

const ptr = pullToRefresh.init({
                mainElement: '.dashboard-container',
                onRefresh() {
                    console.log('pulled');
                    // this._service.action();
                }
            });

now obviously the this is not going to work since this now refers to the onRefresh() callback function. So my question is how can I correctly bind this to use it correctly within that callback function onRefresh

now I have tried to just change the callback to an arrow function like so

onRefresh = () => {...

but my tslint says '=' can only be used in an object literal property inside a destructuring assignment.

any help would be appreciated

Francisco Hanna · Accepted Answer · 2019-05-15 04:12:30Z

2

You could try using an arrow function so onRefresh does not create it's own scope, like so:

const ptr = pullToRefresh.init({
    mainElement: '.dashboard-container',
    onRefresh: () => {
        console.log('pulled');
        // this._service.action();
    }
});

3 Comments

Smokey Dawson Over a year ago

my tslint '=' can only be used in an object literal property inside a destructuring assignment. I should of been more specific I did try using an arrow function already I will update my question

Francisco Hanna Over a year ago

There was a typo in the code I posted. It's fixed now.

Francisco Hanna Over a year ago

Glad to hear! Accept the answer please :)

wentjun · Accepted Answer · 2019-05-15 04:14:12Z

1

For this, you can bind this to your callback function.

pullToRefresh.init({
  mainElement: '.dashboard-container',
  onRefresh() {
    console.log('pulled');
    // this._service.action();
  }.bind(this)
})

Alternatively, you may try this:

const that = this;
const ptr = pullToRefresh.init({
  mainElement: '.dashboard-container',
  onRefresh() {
    console.log('pulled');
    that.service.action();
  }
});

edited May 15, 2019 at 4:14

answered May 15, 2019 at 4:02

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

4 Comments

Smokey Dawson Over a year ago

My VSCode doesn't like this it says ',' expected

wentjun Over a year ago

Hmm... Ok honestly I am not too sure about that too. How about binding this on the init? pullToRefresh.init({...}).bind(this)? Also, I have initially added the ; at the end of the onRefresh{...}.bind(this). That might have have caused the warning on your VSCode

Smokey Dawson Over a year ago

No that didnt work either I got a webpack error ERROR TypeError: pulltorefreshjs__WEBPACK_IMPORTED_MODULE_8__.init(...).bind is not a function

wentjun Over a year ago

I see.. Ok let me update it with the old school way.. Assigning that with the reference of this

Collectives™ on Stack Overflow

Trouble binding 'this' Angular / Javascript

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related