如何在$ http调用的.success内部访问类属性？

Question

我有这个打字稿代码：

class UserService implements IUserService {

    data = {
    loginMessage: ""
    };

    static $inject = [
        '$http'
    ];

    constructor(
        private $http
        ) {
    }

    authenticate = () => {

        // This works 
        this.data.loginMessage = 'Authenticating ...';

        this.$http({
            method: 'POST',
            url: '/Token',
            data: 'xxx',
        })
       .success((data1, status, headers, cfg) => {
           // Here the this.data is undefined
           this.data.loginMessage = 'Okay';
       })
    })

}

这只是一个例子，但它显示了我的问题。 我希望能够在.success内部修改属性数据。 但是，当我尝试执行此操作时，它说this.data是未定义的。

有人可以告诉我如何解决这个问题。

更新：

这是我找到的并且似乎可行的解决方案。 我在身份验证功能内部定义了self。 有人可以对此发表评论吗？ 使用它是否合理，否则可能存在其他潜在问题？

class UserService implements IUserService {

    data = {
    loginMessage: ""
    };

    static $inject = [
        '$http'
    ];

    constructor(
        private $http
        ) {
    }

    authenticate = () => {

        var self = this;

        // This works 
        this.data.loginMessage = 'Authenticating ...';

        self.$http({
            method: 'POST',
            url: '/Token',
            data: 'xxx',
        })
       .success((data1, status, headers, cfg) => {
           // Here the this.data is now defined
           self.data.loginMessage = 'Okay';
       })
    })

}

Answer 1

您在函数内部的this不是服务，而是函数（了解函数范围）。
为此，请使用本地self变量。

  constructor(private $http) {
    var self = this; // add this
  }

 authenticate = () => {
        this.data.loginMessage = 'Authenticating ...';

        this.$http({
            method: 'POST',
            url: '/Token',
            data: 'xxx',
        })
       .success((data1, status, headers, cfg) => {
           // this is the function!!!
           self.data.loginMessage = 'Okay';
       })
    })

Answer 2

如果将authenticate定义为方法而不是函数，则它将起作用。 您不需要做var self = this; 如上文建议（正确）所述。

那会使类看起来像这样：

class UserService implements IUserService {

    data = {
    loginMessage: ""
    };

    static $inject = [
        '$http'
    ];

    constructor(
        private $http
        ) {
    }

    private authenticate(): void {

        // This works 
        this.data.loginMessage = 'Authenticating ...';

        this.$http({
            method: 'POST',
            url: '/Token',
            data: 'xxx',
        })
       .success((data1, status, headers, cfg) => {
           // Here the this.data is undefined
           this.data.loginMessage = 'Okay';
       })
    })

}

Answer 3

这样的事情可能行得通吗？

class UserService {

data = {
    loginMessage: ""
};

static $inject = [
    '$http'
];

constructor(){
    this.authenticate();
}


private authenticate(): void {

    // This works 
    this.data.loginMessage = 'Authenticating ...';

    this.$http({
        method: 'POST',
        url: '/Token',
        data: 'xxx',
    })
   .success((data1, status, headers, cfg)=>this.onSuccess(data1, status, headers, cfg));
}

private onSuccess(data1, status, headers, cfg){
       // Here the this.data is undefined
       this.data.loginMessage = 'Okay';
}

}

基本上，您想要的是成功函数使用主类的this ，对吗？

因此，可以将其编译为：

var UserService = (function () {
function UserService() {
    this.data = {
        loginMessage: ""
    };
    this.authenticate();
}
UserService.prototype.authenticate = function () {
    var _this = this;
    // This works
    this.data.loginMessage = 'Authenticating ...';

    this.$http({
        method: 'POST',
        url: '/Token',
        data: 'xxx'
    }).success(function (data1, status, headers, cfg) {
        return _this.onSuccess(data1, status, headers, cfg);
    });
};

UserService.prototype.onSuccess = function (data1, status, headers, cfg) {
    // Here the this.data is undefined
    this.data.loginMessage = 'Okay';
};
UserService.$inject = [
    '$http'
];
return UserService;
})();

对我来说看起来正确（未经测试）

在此处共享链接。