In an Angular 2 app, I'm trying to store a method in a variable but calling it always throws an error. I'll explain it better below:

I have to call to 3 different API methods for updating the database, depending on the user's type: customer, collaborator or provider. This is what I have right now:

let updateAPIMethod;

switch (user.type) {
    case OBJTYPES.CUSTOMER:
        updateAPIMethod = this.customerService.updateCustomer;
        break;
    case OBJTYPES.COLLAB:
        updateAPIMethod = this.collaboratorService.updateCollaborator;
        break;
    case OBJTYPES.PROVIDER:
        updateAPIMethod = this.providerService.updateProvider;
        break;
}
updateAPIMethod(user).subscribe( (ret) => { DEAL WITH SUCCESS },
    (error) => { DEAL WITH ERROR });

Each function is a call to http.put that return an Observable. When I run the above code I get:

TypeError: Cannot read property 'http' of undefined

I think it's because just calling the function doesn't set the appropiate 'this' value but I'm not sure...

Is there a way to do what I want? Thanks!

In an Angular 2 app, I'm trying to store a method in a variable but calling it always throws an error. I'll explain it better below:

I have to call to 3 different API methods for updating the database, depending on the user's type: customer, collaborator or provider. This is what I have right now:

let updateAPIMethod;

switch (user.type) {
    case OBJTYPES.CUSTOMER:
        updateAPIMethod = this.customerService.updateCustomer;
        break;
    case OBJTYPES.COLLAB:
        updateAPIMethod = this.collaboratorService.updateCollaborator;
        break;
    case OBJTYPES.PROVIDER:
        updateAPIMethod = this.providerService.updateProvider;
        break;
}
updateAPIMethod(user).subscribe( (ret) => { DEAL WITH SUCCESS },
    (error) => { DEAL WITH ERROR });

Each function is a call to http.put that return an Observable. When I run the above code I get:

TypeError: Cannot read property 'http' of undefined

I think it's because just calling the function doesn't set the appropiate 'this' value but I'm not sure...

Is there a way to do what I want? Thanks!

• javascript
• angular
• typescript

• Did you really intend to invoke the function on this line?: ... = this.collaboratorService.updateCollaborator(); – Arg0n Commented Sep 1, 2017 at 11:04
• have u imported http module from @angular/http in wherever your using http service – Shushanth Pallegar Commented Sep 1, 2017 at 11:04
• You're probable missing a .bind(...) or => which breaks bind, but I don't see relevant code in your question where you pass the function to make more concrete suggestions how to fix. – Günter Zöchbauer Commented Sep 1, 2017 at 11:04
• First updateAPIMethod = this.collaboratorService.updateCollaborator();: are you shure aboit the call at the end? Secound: try to bind the correct this object by: this.customerService.updateCustomer.bind(this.customerService) – Bellian Commented Sep 1, 2017 at 11:04

1 Answer 1

You loose context when you detach method from base object. As a result this.http in your services is undefined.

This should work:

let updateAPIMethod;

switch (user.type) {
    case OBJTYPES.CUSTOMER:
        updateAPIMethod = this.customerService.updateCustomer.bind(this.customerService);
        break;
    case OBJTYPES.COLLAB:
        updateAPIMethod = this.collaboratorService.updateCollaborator.bind(this.collaboratorService);
        break;
    case OBJTYPES.PROVIDER:
        updateAPIMethod = this.providerService.updateProvider.bind(this.providerService);
        break;
}
updateAPIMethod(user).subscribe( (ret) => { DEAL WITH SUCCESS },
    (error) => { DEAL WITH ERROR });

You could also shorten it with bind operator (might need transform-function-bind babel plugin):

switch (user.type) {
    case OBJTYPES.CUSTOMER:
        updateAPIMethod = ::this.customerService.updateCustomer;
        break;
// ...