Angular 6 'is not a function' when use this. inside another function

Question

I'm having some issues with typescript, I have this code:

private loadTeams = function(){
    let token =  sessionStorage.getItem('token');
    if(token !== undefined && token !== null && token !== ''){
      this._userService.getUserByToken(token)      
        .subscribe(user => {
          this._teamService.getTeamsByUser(token, user)
            .subscribe(data => {
              this.teamList = data.data;
            }, error => {

            });
        }, error => {

        });
    } else {
      sessionStorage.removeItem('token');
    }
  }

And gives me the error:

ERROR TypeError: "_this._teamService.getTeamsByUser is not a function"

In other articles, people tell to use arrow function but I think it is already an arrow function?

I have tried to use let that = this; and then call that instead of this in the second function but it didn't work.

Another thing that I have seen people doing is to use .bind(this) but I don't know where do I do that.

Can someone explain to me why is it happening and how to solve that?

loadTeams = function(){ breaks your code. Try loadTeams() { instead — yurzui
– yurzui, Commented Oct 4, 2018 at 13:42
So how should I do the functions? Should I just use loadTeams(){} ? — Danifilipers
– Danifilipers, Commented Oct 4, 2018 at 13:43
using function resets this to a new scope because of how javascript works. It's messy and nasty, but that's how it works. You can either use methods as @yurzui proposed (which I think is the correct thing to do here), or use arrow functions instead of using the function keyword, like this: private loadTeams = () => {...} — ShamPooSham
– ShamPooSham, Commented Oct 4, 2018 at 13:47
I have tried loadTeams() {...} and loadTeams = () => {...}and the same error keeps showing — Danifilipers
– Danifilipers, Commented Oct 4, 2018 at 13:57

Danifilipers · Accepted Answer · 2018-10-04 14:30:13Z

1

Ok problem fixed. I just used private loadTeams(){...} like you told me but I don't know why I had to shutdown angular and do ng serve again to work.

answered Oct 4, 2018 at 14:30

Danifilipers

1231 gold badge1 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juan M. Medina Over a year ago

Do note this is the preferred way to declare a method, but what you had originally or doing a lambda works the exact same way. See my answer somewhere below.

Juan M. Medina · Accepted Answer · 2018-10-04 14:55:53Z

You may have an issue with your _teamService injection or construction. Declaring the loadTeams in different fashions works as long as the service call is not undefined.

So,

loadTeams() { ... or loadTeams = function() {... or loadTeams = () => { ...

All do work if things are properly initialized.

I did put together a Typescript Scratchpad to play with this, can't get it to fail with either of those, but then again my fake version of the "_teamsService" is initialized.

See typescript example Typescript example. You can replace the function definition any of those three ways and things work just fine.

johey · Accepted Answer · 2018-10-04 13:58:04Z

0

Where is this._userService coming from? It probably has not been initialized.

Did you forget to inject it into the constructor?

answered Oct 4, 2018 at 13:58

johey

1,2181 gold badge11 silver badges27 bronze badges

2 Comments

Danifilipers Over a year ago

Yes it is inserted in the constructor like this constructor(private _teamService: TeamService, private _userService: UserService) { }

Suresh Kumar Ariya Over a year ago

Can you please post TeamService Code

danday74 · Accepted Answer · 2018-10-04 14:19:06Z

When you do this:

private loadTeams = function(){
  // this here refers to the function
}

What you should do is this:

private loadTeams() {
  // this refers to the instance of the class
}

Alternatively, bind this in the constructor like this:

constructor(/* inject stuff here */) {
  this.loadTeams = this.loadTeams.bind(this)
}
private loadTeams = function(){
  // this refers to the instance of the class
}

However, I'm not convinced this is your problem.

If this was your problem then this._userService would be undefined and you would get a null pointer error when calling undefined.getUserByToken(token)

FYI I've said this 16 times in this post, did you spot this?

I also am having that issue. service in constructor is undefined when I override an @Input function from a child component. tried that but it doesnt work.

Collectives™ on Stack Overflow

Angular 6 'is not a function' when use this. inside another function

4 Answers 4

1 Comment

Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

1 Comment

Related