Angular2 ngIf не обновлять 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(); 
    } 
} 

Я хочу изменить код, чтобы отображать/скрыть правильные кнопки в зависимости от состояния входа. Я вижу на консоли, что auth переключается с нуля на объект и обратно, но 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, но ... если auth переключается с null и обратно, вы можете хранить и использовать это. Храните его, например, когда вы подписываетесь, вы можете подписаться auth => this.auth = auth вместо console.log, то вы могли бы просто использовать его так:

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

Может быть, это не самый лучший способ. Вы также можете создать логическое значение, например isLogged, и использовать его для отображения/скрытия кнопок.

И, конечно, возможно, есть лучший способ сделать это ... Но, по крайней мере, варианты здесь.

Answer 2

Я думаю, вы должны искать AsyncPipe и safe navigation operator (?.) понять (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>`