HTTP 응답의 토글 요소

Question

저는 Angular 2에서 새롭습니다. 저는 angular2 + node js 설정 작업을하고 있습니다. 프로젝트에서 간단한 인증 호출. 내가 원하는 것은 로그인 API가 오류를 반환하면 div 블록을 표시하는 것입니다.

다음은 내가 한 것입니다.

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> 

문제, 서버 false를 반환 될 때, 나는 참으로 오류 속성을 설정 해요하지만 어떤 효과를 표시하지 않습니다 .

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을 추가했다.