内部函数 如何使用 "this.http (Restful)"?

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

我创建了一个 HTTP 实用程序服务和一个消息服务。

在消息框中,征求用户的同意。当我同意时,我在使用 HTTP 实用程序服务时遇到了问题。

我不知道如何使用函数内部的 HTTP 实用程序服务。

请帮帮我。

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

我购买了 "SmartAdmin" 模板。

所以你可以使用"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");
    })
}

[结果]

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

首先你必须导入它 import { Http } from @angular/http,在你的构造函数中声明它 private http : Http 然后你可以像这样在任何函数中使用它 this.http.post(...)。 您应该查看文档以获取更多详细信息 https://angular.io/guide/http

经典 this 范围问题。对于问题中的代码,this 与其所在的函数隔离,因此无法访问您尝试访问的 this 对象。

要解决此问题,您需要将变量分配给 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");
    })
}

这里我给 this 分配了一个名为 "self" 的引用变量,这样我们就可以在我们的函数中访问它。

注意:您可以使用 ES6 的 arrow function

来解决这个问题

看起来像这样:

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

在构造函数中注入依赖项

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
  ) { }

}

并将函数更改为绑定到 this

的 ES6 箭头函数
 function () {
   //code here
 }


 ES6 arrow function

 () => {
   //code here
 }