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>

您还可以考虑使用Angular 4中引入的as关键字重构上述代码段：

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

有关official docs。{/ p>中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>

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

* ngIf无法按预期工作

2 个答案: