this.<servicename> 在 angular2 中的错误函数内部不可用

Question

我在 angular2 中有一个奇怪的错误。而下面的代码工作正常

loginResult.subscribe(
      (data) =>
        this.response = data,
      (err) =>

        this._ajaxService.handleError(err, 'A string to summarize the activity')
    );

下面的代码表示无法读取属性未定义的 handleError。只有在请求失败的情况下才会发生这种情况。

    loginResult.subscribe(
   function (response) {

        this.response = response;
        console.log(this.response);

      },
      function (error) {

        this._ajaxService.handleError(error, 'A string to summarize the activity')

      }
    );

Answer 1

将 "this" 绑定到成功函数和失败函数。

loginResult.subscribe(
    function (response) {
        this.response = response;
        console.log(this.response);
    }.bind(this), // <== "this" binding here
    function (error) {
        this._ajaxService.handleError(error, 'A string to summarize the activity')
    }.bind(this)
);

Answer 2

使用 () => {}（箭头函数）作为回调，以便 this 引用组件，因为 arrow function 不会创建自己的 this上下文：

  loginResult.subscribe(
      (response) => {
          this.response = response;
          console.log(this.response);
      }, 
      (error) => {
          this._ajaxService.handleError(error, 'A string to summarize the activity')
      }
  );

不过，如果您想使用 function(){}，您可以 bind 组件的 this 上下文到函数，如下所示：

  function(response){
      // now 'this' refers to the component class
  }.bind(this)

Answer 3

let that = this;
    loginResult.subscribe(
      function (res) {

        that.response = res;
        console.log(this.response);

      },
      function (error) {

        that._ajaxService.handleError(error, 'A string to summarize the activity')

      }

    );

this.<servicename> 在 angular2 中的错误函数内部不可用

this.<servicename> not available inside error function in angular2

javascript

ajax

angular

scoping

subscribe