javascript - Call to a method stored in a variable in Typescript - Stack Overflow

admin管理员组

文章数量:1401133

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

Share Improve this question Follow edited Sep 1, 2017 at 11:36 Fel asked Sep 1, 2017 at 11:02 FelFel 4,8381212 gold badges4545 silver badges101101 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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;
// ...

本文标签： javascriptCall to a method stored in a variable in TypescriptStack Overflow