*ngIf无法按预期工作

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;
}

AuthService:

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>

您还可以考虑使用asAngular 4中引入的关键字重构上面的代码段:

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

更多关于官方文档中的as语法.

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>

您可以在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>