在HTTP响应中切换元素

Question

我对Angular 2非常新颖。我正在研究angular2 + node js setup。在项目中它是一个简单的认证调用。我想要的是显示一个div块，如果登录api返回一个错误。

这是我所做的。

LoginComponent

private loginResponse: any; 
private submitted: boolean; 
private error: boolean = false; 
private errorMessage: string; 
public loginForm: FormGroup; 

ngOnInit() { 
    // if user is authenticated, redirect him/her to dashboard 
    if (this.auth.isAuthenticated()) { 
     this.router.navigate(['dashboard']) 
    } 
    this.submitted = false; 
} 

// authenticate user 
getLogin() { 
    // return if form is invalid 
    if (!this.loginForm.valid) { 
     return false; 
    } 
    this.submitted = true; 
    var formData = this.loginForm.value; 
    this.auth.login(formData.email, formData.password, this.translate.currentLang) 
     .subscribe(
      (data: Response) => { 
       this.loginResponse = data; 
       if (this.loginResponse.result) { 
        localStorage.setItem('token', this.loginResponse.data); 
        window.location.reload(); 
       } 
       this.submitted = false; 
       this.error = true; 
       this.errorMessage = this.loginResponse.message; 
      }, 
      err => { 
       console.log(err); 
      } 
     ); 
} 

LoginComponent.html

<form [formGroup]="loginForm" id="sign_in" (ngSubmit)="getLogin()" autocomplete="false"> 
      <div *ngIf="error" class="text-danger text-justify msg"> 
       {{ errorMessage }} 
      </div> 

的问题是，当服务器返回结果假的，我的错误属性设置为true，但它并不显示任何效果。

Answer 1

这可能是由于private error: boolean = false;：

作为每docs

：

当一个成员被标记私有，它不能被从 其包含类之外访问

由于模板不存在于组件类中，但在它们之外，这可能是您遇到此问题的原因。

你可以试着改变你的代码是这样的：

private loginResponse: any; 
private submitted: boolean; 
private errorMessage: string; 
public loginForm: FormGroup; 

error: boolean; 

ngOnInit() { 
    // if user is authenticated, redirect him/her to dashboard 
    if (this.auth.isAuthenticated()) { 
     this.router.navigate(['dashboard']) 
    } 
    this.submitted = false; 
} 

// authenticate user 
getLogin() { 
    // return if form is invalid 
    if (!this.loginForm.valid) { 
     return false; 
    } 
    this.submitted = true; 
    var formData = this.loginForm.value; 
    this.auth.login(formData.email, formData.password, this.translate.currentLang) 
     .subscribe(
      (data: Response) => { 
       this.loginResponse = data; 
       if (this.loginResponse.result) { 
        localStorage.setItem('token', this.loginResponse.data); 
        window.location.reload(); 
        this.error = false; 
       } 
       this.submitted = false; 
       this.error = true; 
       this.errorMessage = this.loginResponse.message; 
      }, 
      err => { 
       console.log(err); 
      } 
     ); 
} 

改为error: boolean;并添加this.error = false如果响应是确定的。