angular - 使用异步在同一个 Angular 模板中绑定(bind)到同一个 observable 两次

Question

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

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

userService.CurrentUser 是一个生成 User 类型对象的 Observable。用户具有名为 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>

不幸的是，这没有按预期工作。一些小实验似乎表明，无论两个 元素中哪个先出现在模板标记中，都会对其表达式求值，而第二个则不会，导致它没有内容。

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

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

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

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

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

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>

只有一个 suscription，它更干净。