隱藏登錄按鈕登錄後，反之亦然

Question

這是我component.ts

import { Component, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { AngularFireAuth } from 'angularfire2/auth'; 
import * as firebase from 'firebase/app' 
import {Router} from "@angular/router"; 

@Component({ 
    selector: 'app-navbar', 
    templateUrl: './navbar.component.html', 
    styleUrls: ['./navbar.component.css'] 
}) 
export class NavbarComponent implements OnInit { 

    user: Observable<firebase.User>; 

    constructor(
    public afAuth: AngularFireAuth, 
    private router:Router) { 
    this.user = afAuth.authState; 
    } 

    ngOnInit() { 
    } 
    login(){ 
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); 
    } 
    logout(){ 
    debugger; 
    this.afAuth.auth.signOut(); 
    this.router.navigate(['/']); 
    console.log(this.afAuth); 
    } 

} 

我登錄的HTML視圖部分並註銷在這裏

<ul class="list-inline nav navbar-nav navbar-right"> 

      <li class="list-inline-item" ngIf="!(afAuth.auth| async)"><a (click)="login()" style="color:red;">Login</a></li> 
      <li class="list-inline-item" ngIf="(afAuth.auth| async)"><a (click)="logout()" style="color:red;">Logout</a></li> 

     </ul> 

我想隱藏登錄按鈕登錄後，也註銷時我想顯示登錄，但它不工作。

的錯誤是

ERROR Error: No provider for TemplateRef! 
    at injectionError (core.es5.js:1231) 
    at noProviderError (core.es5.js:1269) 
    at ReflectiveInjector_._throwOrNull (core.es5.js:2770) 
    at ReflectiveInjector_._getByKeyDefault (core.es5.js:2809) 
    at ReflectiveInjector_._getByKey (core.es5.js:2741) 
    at ReflectiveInjector_.get (core.es5.js:2610) 
    at AppModuleInjector.NgModuleInjector.get (core.es5.js:3578) 
    at resolveDep (core.es5.js:11039) 
    at createClass (core.es5.js:10895) 
    at createDirectiveInstance (core.es5.js:10723) 

請幫我找到了答案

Answer 1

「的（*）前綴ngIf是這種語法的重要組成部分」 Docs

與此說，你錯過了所有的（*）每個*ngIf

<ul class="list-inline nav navbar-nav navbar-right"> 
<li class="list-inline-item" *ngIf="!(user | async)"><a (click)="login()" style="color:red;">Login</a></li> 
<li class="list-inline-item" *ngIf="(user | async)"><a (click)="logout()" style="color:red;">Logout</a></li> 
</ul>