это. <servicename> недоступно внутри функция ошибки в угловом2

Question

У меня странная ошибка в угловом2. в то время как нижеследующий код работает нормально

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

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

В следующем коде сказано, что невозможно прочитать свойство handleError of undefined. Это происходит только в случае неудачного запроса.

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

Bind "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(){}, вы можете this контекст bind компонента функции следующим образом:

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') 

     } 

    );