Angular2 ng DOMを更新していない場合は、

Question

ngIfが正しく評価される正しい表現が見つからないようです。

私は単純なAngularfire2 example hereに従っており、ログインして正しくログアウトすることができます。

import { Component } from '@angular/core'; 
import { AngularFire } from 'angularfire2'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <div> {{ (af.auth | async)?.uid }} </div> 
    <button (click)="login()">Login</button> 
    <button (click)="logout()">Logout</button> 
    `, 
}) 
export class AppComponent { 
    constructor(public af: AngularFire) { 
    this.af.auth.subscribe(auth => console.log(auth)); 
    } 

    login() { 
    this.af.auth.login(); 
    } 

    logout() { 
    this.af.auth.logout(); 
    } 
} 

私は状態に応じてログインし、正しいボタンを表示/非表示するコードを変更したいです。コンソールでは、認証がヌルからオブジェクトおよびバックに切り替わっていますが、DOMは更新されていないことがわかります。

<div> {{ (af.auth | async)?.uid }} </div> 
<button *ngIf="!(auth | async)" (click)="login()">Login</button> 
<button *ngIf="auth | async" (click)="logout()">Logout</button> 

は私が間違って何をやっている：ここで

は、最新の試みですか？これを正しく評価するにはどうすればよいですか？

Answer 1

EDIT：loginとlogoutの方法で変更されたログイン状態に登録していないので、メソッドにthis.af.auth.subscribe(auth => this.auth = auth);を追加する必要があります。

私はAngularfireに精通していませんが、...認証がnullから切り替わっている場合は、それを保存して使用できます。

<button *ngIf="auth == null" (click)="login()">Login</button> 
<button *ngIf="auth != null" (click)="logout()">Logout</button> 

は多分これが最善の方法ではありません。あなたが加入したとき、あなたは、あなたがちょうどそうのようにそれを使用することができ、auth => this.auth = auth代わりのconsole.logを購読することができ例えば、それを保管してください。 isLoggedのようなブール値を作成し、ボタンを表示/非表示にすることもできます。

確かに、これを行うにはより良い方法があるでしょう...しかし、少なくともここにはオプションがあります。

Answer 2

私はあなたがHTMLテンプレートからサブスクライブ機能に**認証**パラメータを参照することはできません(af.auth | async)?.uid表現

template: ` 
<div [ngSwitch]="(af.auth | async)?.uid"> 
<button *ngSwitchCase="null" (click)="login()">Login</button> 
<button *ngSwitchDefault (click)="logout()">Logout</button> 
</div>`