ngIf with condition 丢失原始对象以进行 let 绑定；使用异步管道

Question

假设我像这样跟踪当前登录的用户。如果用户为空，则他们未登录。如果已登录，则他们要么是匿名的（没有名字），要么不是。

interface User {
  name?: string;
}

currentUser$: Observable<User>;

现在假设我想在用户不是匿名用户时显示一些内容，就像这样...

<div *ngIf="(this.currentUser$ | async)?.name != null; let user">
    Hello {{user.name}}
</div>

这不起作用，因为 user 变量绑定到布尔值，而不是异步管道中的原始用户。同样，我不能使用 *ngIf 来查找登录用户 - 匿名与否 - 因为一旦我运行条件 (this.currentUser$ | async) != null; let user 我就不再有权访问要在模板中使用的用户对象.

我试过这样的东西...

<ng-container *ngIf="this.currentUser$ | async; let user">
    <div *ngIf="user === 'none'">Need to sign in</div>
    <div *ngIf="user !== 'none' && user.name==null">Hi stranger</div>
    <div *ngIf="user !== 'none' && user.name!=null">Hi {{user.name}}</div>
</ng-container>

但这也不管用。首先，我需要将我的可观察对象转换为 null 与其他内容交换的对象，例如 -1 或字符串 none，因为我很确定 *ngIf 将 return错误的。然后 user.name==null 部分将无法编译，因为 Angular 仍然认为该变量是一个 User | 'none'，不仅仅是一个用户。我无法弄清楚如何转换它以使错误消失。

我认为我可以通过订阅组件中的可观察对象、将当前用户详细信息存储为一两个变量，然后在模板中使用 {{currentUser}} 来完成大部分我想做的事情。这是一堆额外的工作，我需要记得退订。有点打败异步管道的酷。

我在这里错过了什么？我来自 asp.net Razor 背景，您可以在模板中定义临时变量，我想我想在这里做类似的事情。

Answer 1

两件事：首先从您的 html 中删除 this，这不是必需的。
其次，你可以这样做：(this.currentUser$ | async) as user

<div *ngIf="(this.currentUser$ | async) as user">
    <span *ngIf="user.name">Hello {{user.name}}</span>
</div>

ngIf with condition 丢失原始对象以进行 let 绑定；使用异步管道

ngIf with condition loses original object for let binding; with async pipe

angular

angularjs-directive