异步管道不适用于主题

Question

我在服务中有以下 BehaviorSubject：

  isAuthenticated = new BehaviorSubject<boolean>(false);

我在一个组件中按如下方式使用它：

  authenticated: Observable<boolean>;

  constructor(private accountService: AccountService) { }

  ngOnInit() {
    this.authenticated = this.accountService.isAuthenticated.asObservable();
  }

在模板中我做了类似的事情：

  <li class="login-button" *ngIf="!authenticated | async">
    <a (click)="authenticate()">Log in</a>
  </li>
  <li *ngIf="authenticated | async">
    <a>Logged in</a>
  </li>

问题是我没有看到两个 li 中的任何一个，尽管假设第一个应该出现，因为我将 Subject 的初始值分配给 false。

我做错了什么？

Answer 1

我怀疑它的操作顺序 - 你需要在你的订阅周围加上括号：

<li class="login-button" *ngIf="!(authenticated | async)">

Answer 2

我考虑过使用 ng-if-else 发布解决方案，这在您的特定情况下可能更直观：

<li class="login-button" *ngIf="(authenticated | async); else unauthenticated">
  <a>Logged in</a>
</li>
<ng-template #unauthenticated>
  <a (click)="authenticate()">Log in</a>
</ng-template>

或者，您可以将两种情况都放在 ng-template:

中

<li class="login-button" *ngIf="(authenticated | async); then authenticated else unauthenticated"></li>
<ng-template #authenticated ><a>Logged in</a></ng-template>
<ng-template #unauthenticated><a (click)="authenticate()">Log in</a></ng-template>

希望它对最终来到这里的其他人有用。

异步管道不适用于主题

Async pipe not working with Subject

angular

rxjs

subject-observer