*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>

您可以在 the docs 中查看更多示例。

Answer 3

我喜欢 *ngIf and Else 方法的答案，但您的版本也可以优化以防止重复订阅。

<ng-container *ngIf="{ isLoggedIn: (isLoggedIn$ | async) } as observables">
  <a class="router-link nav-item" routerLink="/login" *ngIf="!observables.isLoggedIn">
    Login
  </a>
  <a class="router-link nav-item" (click)="onLogout()" *ngIf="observables.isLoggedIn">
  Logout
  </a>
</ng-container>

*ngIf 不能按预期使用 observable

*ngIf not working as expected with observable

angular-ng-if

angular