*ngIf 沒有按預期使用 observable

Question

所以我有這兩個按鈕：

<a class="router-link nav-item" routerLink="/login" *ngIf="!isLoggedIn$ | async">
  Login
</a>
<a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn$ | async">
  Logout
</a>

並且注銷按鈕工作得很好，只要用戶登錄按鈕就會出現。 但是登錄按鈕永遠不會出現。

這是isLoggedIn$背后的代碼：

isLoggedIn$: Observable<boolean>;

ngOnInit() {
  this.isLoggedIn$ = this.authService.isLoggedIn;
}

身份驗證服務：

private loggedIn = new BehaviorSubject<boolean>(false);

get isLoggedIn() {
  return this.loggedIn.asObservable();
}

希望這是足夠的信息並且問題很清楚，在此先感謝！

Answer 1

將異步管道放在括號中。

<a class="router-link nav-item" routerLink="/login" *ngIf="!(isLoggedIn$ | async)">
  Login
</a>
<a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn$ | async">
  Logout
</a>

Answer 2

您還可以重構以使用 ngIf 指令的 else 部分：

<a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn$ | async; else loginBlock">
    Logout
</a>
<ng-template #loginBlock>
    <a class="router-link nav-item" routerLink="/login">
        Login
    </a>
</ng-template>

您可以在文檔中看到更多示例。