Jawad Jawad - 1 month ago 26
TypeScript Question

angular 2 Unhandled promise rejection TypeError

I'm new to angular and typescript. I'm getting error "Unhandled promise rejection TypeError: Cannot set property"

here is my code:

login.component.ts

export class LoginComponent implements OnInit {

constructor(private fb: FormBuilder, private loginService: LoginService) { }


submitError = false; // set "true" to show error

onSubmit(){

this.submitError = false;
this.submitErrorText = "";
this.model = this.loginForm.value;
this.loginService.authenticate(this.model.login_id, this.model.password)
.then(res => {

if(res.status == 404){

this.submitError = true;

}
else{
// do something
}

}).catch(function(err: any){

this.submitError = true; // Unhandled promise rejection TypeError: Cannot set property 'submitError' of undefined



});




}


login-service.ts

import {Injectable} from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

@Injectable()
export class LoginService{


private auth_url = "/login/api/auth";

constructor(private http: Http){};

authenticate(username: String, pass: String): Promise<any>{
return this.http.post(this.auth_url, {username: username,pass: pass})
.toPromise()
.then(response => response.json())
.catch(this.handleError);
}

private handleError(error: any): Promise<any>{

return Promise.reject(error.message || error);
}

}


submitError is class level property, why its not accessible or undefined.
what is the proper way to access it?

Answer

You're facing a common problem in JavaScript.

Fortunately, in ES6 and TypeScript you can use an arrow function (lambda expression) to lexically capture the meaning of this.

}).catch((err:any) => {
    this.submitError = true; // this works
});

}).catch(function (err:any) {
        this.submitError = true; // this doesn't work
});

More information about arrow functions: Arrow Functions