角度4インスタンスフィールドは、コードに変更はなく変更がテンプレート

Question

に反映取得されていない問題は、私は明示的にref.detectChanges

signInWithGoogleを呼び出さない限り、コンポーネントクラスのインスタンス変数の変化が私のテンプレートファイルには反映されませんということです

export class LoginComponent implements OnInit { 
    errorMessage: string; 
    request = new LoginRequest(); 

    googleSignIn($event) { 
     $event.preventDefault(); 
     this.authService.signInWithGoogle().subscribe(
      (user: User) => { 
      console.log('logged in'); 
      }, 
      err => { 
      this.errorMessage = 'Problem while signing in with google'; 
      } 
     ); 
     } 
} 

：私はGoogleの

signInWithGoogle(): Observable<User> { 
    const observable = Observable.fromPromise(
     this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()) 
    ).concatMap(result => { 
     const url = environment.apiEndpoint + '/rest-auth/social/google/'; 
     const request = { access_token: result.credential.accessToken }; 
     return this.login(url, request); 
    }); 
    return observable; 
    } 

    private login(url, request): Observable<User> { 
    return this.http 
     .post<User>(
     url, 
     request 
    ) 
     .concatMap((user: User) => { 
     localStorage.setItem(
      environment.constants.STORAGE_USER, 
      JSON.stringify(user) 
     ); 
     return Observable.of(user); 
     }); 
    } 

後にサインインするコンポーネントから呼び出して、私の認証サービスのメソッドは、私のコンポーネントから関連するコードスニペットをされています10

は、これは私が私のテンプレート

<ngb-alert *ngIf="errorMessage" [dismissible]="false" type="danger"> 
     {{errorMessage}} 
</ngb-alert> 

Answer 1

利用代わりに観測可能にコンポーネントファイルからerrorMessageを使用しています方法です：

// in component 
errorMessage$ = new BehaviorSubject<string>(null); 

googleSignIn($event) { 
    $event.preventDefault(); 
    this.authService.signInWithGoogle().subscribe(
     (user: User) => { 
     console.log('logged in'); 
     }, 
     err => { 
     this.errorMessage$.next('Problem while signing in with google'); 
     } 
    ); 
    } 

そして、あなたのテンプレートに非同期パイプを使用します。たぶん

<ngb-alert *ngIf="errorMessage$ | async as errorMessage" [dismissible]="false" type="danger"> 
    {{ errorMessage }} 
</ngb-alert>