使用异步在同一个 Angular 模板中绑定到同一个 observable 两次

Question

我在组件的模板中有以下内容：

<span>
  {{(userService.CurrentUser | async)?.FullName }}
</span>

userService.CurrentUser 是一个 Observable，它生成 User 类型的对象。用户具有名为 FirstName、LastName、FullName 等的属性。

这段代码可以正常工作。我现在正在尝试自定义在不同屏幕尺寸下显示的内容。我将模板修改如下：

<!--  At screen size sm , show the user's first name  -->
<span class="d-none d-sm-inline d-md-none">
  {{(userService.CurrentUser | async)?.FirstName }}
</span>

<!--  At screen size md or larger, display user's full name  -->
<span class="d-none d-md-inline">
  {{(userService.CurrentUser | async)?.FullName }}
</span>

很遗憾，这并没有按预期工作。一个小实验似乎表明模板标记中的两个 元素中的任何一个都会对其表达式进行评估，而第二个则不会，导致它没有内容。

如果我绑定到组件内的属性而不是使用异步管道绑定到 Observable，我就没有这个问题。

虽然我可以通过在我的组件中订阅 Observable 并维护我自己的 Observable 最新值的副本来跟踪 Observable 的当前值，但这似乎是在重写异步管道。

我还在angular - using async pipe on observable<Object> and bind it to local variable in html 中看到，我可以使用*ngIf 将最新的可观察值存储到变量中。

为什么我没有按预期工作？在使用上述两种选择之一之前，我想了解一下。

更新：这是我用来设置 CurrentUser Observable 的代码。根据评论，我认为这是问题的根源。我怀疑这是因为我只跟踪传递给 Observable 构造函数的函数中的单个订阅者。我认为我不了解创建 Observable 然后通知观察者的正确方法。

export class UserService {
  private currentUser : User;
  private currentUserObservable : Observable<User>;
  private currentUserObserver : Observer<User>;

  constructor()  {
    this.currentUserObservable = new Observable<User>(
      observer => {
        this.currentUserObserver = observer;
      }
    );
  }

  get CurrentUser() : Observable<User> {
    return this.currentUserObservable;
  }

  login (emailAddress : string, password : string) : void {
    this.currentUser = new User(emailAddress, "username", "First Name", "Last Name");      
    this.currentUserObserver.next(this.currentUser);
  }
}

Answer 1

它应该可以正常工作。 但是，正如文档指出的那样，存在一些效率低下的问题： Storing conditional result in a variable (Show a set of properties from the same object)

你可以试试：

<ng-container *ngIf="userService.CurrentUser | async as user">

  <!--  At screen size sm , show the user's first name  -->
  <span class="d-none d-sm-inline d-md-none">
    {{ user.FirstName }}
  </span>

  <!--  At screen size md or larger, display user's full name  -->
  <span class="d-none d-md-inline">
    {{ user.FullName }}
  </span>

</ng-container>

只有一个订阅，而且更干净。