1

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

在消息框中，请求用户同意。当我同意时，我在使用 HTTP 实用程序服务时遇到了麻烦。

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

请帮我。

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

[ 结果 ]

“错误类型错误：无法读取未定义的属性 'http'”

4

3 回答 3

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名为“self”的变量，以便我们可以在函数中访问它。

注意：你可以通过使用 ES6 的箭头函数来解决这个问题

看起来像这样：

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");
    })
}
于 2017-08-31T03:13:57.270 回答
0

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

于 2017-08-31T03:13:05.323 回答
0

在构造函数中注入依赖项

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

}

并将您的函数更改为绑定到的 ES6 箭头函数this

 function () {
   //code here
 }


 ES6 arrow function

 () => {
   //code here
 }
于 2017-08-31T03:19:09.440 回答