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未定义。

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

更新

这是我找到的解决方案，似乎有效。我在authenticate函数中定义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 var。

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

对我来说看起来是对的（没有经过测试）

分享链接here。

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

3 个答案: