使用* ngIfは、HTTPリクエストで無限ループが発生し

Question

private login() { 
    this.http.get(`http://localhost/api/token/${id}`) 
     .map(res => res.json()) 
     .subscribe(res => { 
      this.response = res; 
      if (this.response) { 
       this.router.navigate(['/']); 
      } else { 
       console.log('access denied'); 
       return false; 
      } 
     }); 
} 

<p *ngIf="!login()">Wrong password or username</p> 

すべてが正しくコンパイルが、私はちょうどアプリケーションを起動すると、無限ループがコンソールにaccess deniedログの数百を送信することにより開始します。これは信じられない。 <p>が画面に表示されます。

どうしてですか？ loginボタンをクリックするとログイン機能が呼び出されます。私は無限ループを開始するためにそれをクリックする必要はありません。アプリがブラウザに表示されたときに起こります。

Answer 1

ngIfステートメントは、ログインのメソッドの状態を定期的にチェックします。戻り値：これは、loginメソッドが実際にn回呼び出される理由です。 ngIfをloginメソッドの戻り値にバインドするのではなく、loginメソッドによって変更されたboolean変数にステートメントをバインドします。これによりメソッドが起動されなくなり、ウォッチャーは変数statusで動作します。例では、あなたのテンプレートでは、あなたのコントローラで...

public authError: boolean = false; 

private _login() { 
    this.http.get(`http://localhost/api/token/${id}`) 
     .map(res => res.json()) 
     .subscribe(res => { 
      this.response = res; 
      if (this.response) { 
       this.router.navigate(['/']); 
      } else { 
       console.log('access denied'); 
       // In case of error, set the auth error property to true 
       this.authError = true; 
       return false; 
      } 
     }); 
    } 

：

<p *ngIf="authError">Wrong password or username</p> 

私はloginメソッドの名前を変更したことに注意してください：プライベートメソッドは、慣例により、アンダースコアで開始する必要があります。