Angular2これはコンポーネント内でnullです

Question

"this"がコンポーネント内でnullの奇妙な状況が予想されます。 はこれまでのところ、私は2つの状況でそれを見た：

1）約束が拒否された場合：

if (this.valForm.valid) { 
      this.userService.login(value).then(result => { 
       if(result.success){ 
        this.toasterService.pop("success", "Exito", "Inicio de session correcto"); 
        this.sessionService.setUser(result.data); 
        this.router.navigateByUrl('home'); 
       } 
       else{ 
        this.error = result.code; 
       } 
      },function(error){ 
       console.log("ERROR: " + error); 
       this.error = "ERROR__SERVER_NOT_WORKING"; 
       console.log(this.error); 
      }); 
     } 

機能（エラー）で、私は、対応するエラーを割り当てることはできませんので、これはnullです。

サービスは、次のように働いている：

login(login : Login) : Promise<Response> { 
     return this.http 
     .post(this.serverService.getURL() + '/user/login', JSON.stringify(login), {headers: this.headers}) 
     .toPromise() 
     .then(res => res.json()) 
     .catch(this.handleError); 
    } 

    private handleError(error: any): Promise<any> { 
     console.log('An error occurred', error); // for demo purposes only 
     return Promise.reject(error.message || error); 
    } 

サービスhandleErrorのが呼び出されたときに、この値が失われます。

2） - 私が確認し、私はclearSessionが呼び出され、実行しようとすると、ここでsweetalert

logout(){ 
     swal({ 
      title: 'Are you sure?', 
      text: "You won't be able to revert this!", 
      type: 'warning', 
      showCancelButton: true, 
      confirmButtonColor: '#3085d6', 
      cancelButtonColor: '#d33', 
      confirmButtonText: 'Yes, delete it!' 
      }).then(function() { 
       this.sessionService.clearSession(); 
       this.router.navigateByUrl('login'); 
     }, function(){ 
      //Cancel 
     }); 
    } 

を使用して、これはnullです。

2つの異なる問題であるのか、同じ問題によって両方が原因であるのか分かりません。

Answer 1

使用() => {}独自のthisコンテキスト作成されませんarrow functionとしてthisは、コンポーネントを参照するためには、コールバックとして（ES6の矢印機能）、：あなたはfunction(){}を使用したい場合は、まだ

this.userService.login(value).then(
    (result) => { 
     this.toasterService.pop("success", "Exito", "Login successful!"); 
    }, 
    (error) => { 
     // now 'this' refers to the component class 
     this.error = "SERVER_ERROR"; 
    } 
); 

を、あなたはbind次のようにコールバック関数へのコンポーネントのthisコンテキストをすることができます

this.userService.login(value).then(
    function(result) { 
     this.toasterService.pop("success", "Exito", "Login successful!"); 
    }.bind(this), 

    function(error) { 
     // now 'this' refers to the component class 
     this.error = "SERVER_ERROR"; 
    }.bind(this) 
); 

同じがf適用されるべきですまたは2番目のユースケースです。