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");
    })
}

Answer 2

First you must import it import { Http } from @angular/http, declare it in your constructor private http : Http then you can use it in any fonction like this this.http.post(...). You should checkout documentation for more details https://angular.io/guide/http

Answer 3

Inject your dependencies inside your constructor

import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions, Response, URLSearchParams  } from '@angular/http';

@Injectable()
export class MyService{

  params: URLSearchParams = new URLSearchParams();


  constructor(
    private http: Http
  ) { }

}

and change your function to ES6 arrow function which binds to this

 function () {
   //code here
 }


 ES6 arrow function

 () => {
   //code here
 }