为什么直接从服务访问可以工作，但在我的Angular应用程序中不能使用引用的对象

Question

我有一个AuthService类，它有一个简单的BehaviorSubject，这是从我的服务开始的：

private currentUserSubject: BehaviorSubject<UserModel> = new BehaviorSubject<UserModel>(undefined as any);
get currentUserValue(): UserModel {
return this.currentUserSubject.value;
}
set currentUserValue(user: UserModel) {
this.currentUserSubject.next(user);
}

我有一个测试的功能

isLogged() {
return this.currentUserSubject.asObservable();
}

在我拥有的一个简单组件中，我做了这个：

isLoggedIn$！：可观察的；

constructor(
public authService: AuthService,
private _bottomSheet: MatBottomSheet,
private modalService: NgbModal
) {}
ngOnInit(): void {
this.isLoggedIn$ = this.authService.isLogged();
}

这是我的前端组件：

当我更新此行为：时，这很好

<div *ngIf="this.authService.isLogged() | async as _user; else noUser">
<ng-container *ngIf="_user">
<div> {{ _user.name }}</div>
</ng-container>
</div>

这不是：

<div *ngIf="this.isLoggedIn$ | async as _user; else noUser">
<ng-container *ngIf="_user">
<div> {{ _user.name }}</div>
</ng-container>
</div>

为什么？

Answer 1

这是正常的，因为isLoggedIn$只包含可观察(isLogged(((的初始值

Answer 2

我创建了一个stackblitz演示来尝试重现这个问题，它对我很有效。你的应用程序中可能有其他副作用或打字错误。试试看，看看它是否有效，或者你的代码中是否遗漏了什么：

https://stackblitz.com/edit/angular-stackoverflow-bs-no-issue?file=src/app/app.component.ts

我将与您分享一些关于您的代码的提示：

• 您不需要在模板中使用this
• 服务应该是私人的(也许你知道这一点，并且只是为了演示而做的(
• 您不需要额外的ng容器->ngIf在div中，因为div已经具有ngIf条件