Inside function How do I use "this.http (Restful)"?

Question

I created an HTTP utilities service and a messaging service.

In the message box, ask the user for consent. And when I agree, I have trouble using the HTTP utility service.

I do not know how to use the HTTP utility service inside the function.

Please help me.

[ Message.service.ts ]

FullScreenConfirm(title, content, fs, ff){
    this.notificationService.smartMessageBox({
        title : title,
        content : content,
        buttons : '[No][Yes]'
    }, (ButtonPressed) => {
        if (ButtonPressed == "Yes") {
            fs(); //success Method
        } else if(ButtonPressed == "No"){
            ff(); //fail Method
        }
    });
}

I purchased the "SmartAdmin" template.

So you can use "notificationService".

[ appManagement.component.ts ]

appDelete(appName) {
    this.messageBoxService.FullScreenConfirm("DELETE", "Are you sure you want to delete?",
    function(){
        this.http.delete(this.http.serverURL + "/delete/" + this.appList.id)
        .then((res) => {
            console.log("SUCCESS");
        });
    },
    function(){
        console.log("FAIL");
    })
}

[ RESULT ]

"ERROR TypeError: Cannot read property 'http' of undefined"

Answer 1

Classic this scoping issue. With the code in the question, this is isolated to the function it is in and thus has no access to the this object you're trying to access.

To fix this, you'll need to assign a variable to this

appDelete(appName) {
    var self = this;

    this.messageBoxService.FullScreenConfirm("DELETE", "Are you sure you want to delete?",
    function(){
        self.http.delete(this.http.serverURL + "/delete/" + this.appList.id)
        .then((res) => {
            console.log("SUCCESS");
        });
    },
    function(){
        console.log("FAIL");
    })
}

here i assign a reference variable to this named "self" so we can access it within our function.

NOTE: You can get around this quirk by using ES6's arrow function

That would look something like this:

appDelete(appName) {
    this.messageBoxService.FullScreenConfirm("DELETE", "Are you sure you want to delete?",
    () => {
        this.http.delete(this.http.serverURL + "/delete/" + this.appList.id)
        .then((res) => {
            console.log("SUCCESS");
        });
    },
    (err) => {
        console.log(err || "FAIL");
    })
}