内部功能如何使用＆＃34; this.http（Restful）＆＃34;？

Question

我创建了一个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
        }
    });
}

我购买了＃34; SmartAdmin＆＃34;模板。

所以你可以使用＆＃34; notificationService＆＃34;。

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

[结果]

＆＃34;错误类型错误：无法读取属性＆＃39; http＆＃39;未定义＆＃34;

Answer 1

经典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，名为＆＃34; self＆＃34;所以我们可以在我们的功能中访问它。

注意：您可以使用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");
    })
}

Answer 2

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

Answer 3

在构造函数中注入依赖项

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
 }