在同一个Angular模板中使用异步绑定到相同的可观察两次

Question

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

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

用户服务。货币用户是一个可观察的，生成用户类型的对象。用户有名为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>

不幸的是，这并没有像预期的那样起作用。一个小小的实验似乎表明，两者中的任何一个

如果我绑定到组件中的一个属性，而不是使用异步管道绑定到一个可观察对象，那么我就没有这个问题。

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

我还看到在角-使用异步管在可观察

为什么我所做的事情没有达到预期效果？在使用上述两种选择之一之前，我想先了解一下。

更新：这是我正在使用设置货币用户可观察的代码。基于一个评论，我认为这是问题的根源。我怀疑这是因为我只跟踪传递给可观察构造函数的函数中的单个订阅者。我想我不明白创建一个可观察的然后通知观察者的正确方法。

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

它应该像现在这样工作。然而，正如留档所指出的，有几个低效之处：存储条件会导致变量（显示来自同一对象的一组属性）

你可以试试：

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

只有一个悬念，而且干净多了。