web-dev-qa-db-ja.com

* ngobservableで期待どおりに動作しない場合

だから私はこれらの2つのボタンを持っています：

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

これが十分な情報であり、問​​題が明確であることを願っています、事前に感謝します！

angularangular-ng-if
9
SjaakvBrabant

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>

ドキュメント でさらに例を見ることができます。

4
Adrian Fâciu