Question

我是角色和打字稿的新手。我收到错误“Unhandled promise rejection TypeError：无法设置属性”

这是我的代码：

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



  });




}

登录-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是类级属性，为什么它不可访问或未定义。访问它的正确方法是什么？

Answer 1

您正面临JavaScript中的常见问题。

幸运的是，在ES6和TypeScript中，您可以使用箭头函数（lambda表达式）来词汇性地捕获this的含义。

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

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

有关箭头功能的更多信息：Arrow Functions

Answer 2

将其更改为：

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

Answer 3

使用httpService的好方法是，当您致电httpService并返回json数据时，您需要处理此数据，因为它是response或{ {1}} ..您需要error数据。

在subscribe

login.component.ts

angular 2未处理的promise promise TypeError

3 个答案: