Angular - 如何处理 <User | 的 Observable空>答案

【问题标题】：Angular - How to deal with Observable of <User | null>Angular - 如何处理 <User | 的 Observable空>
【发布时间】：2021-08-06 12:56:45
【问题描述】：

我正在构建一个身份验证服务，我想为当前用户提供 Angular 应用程序中的组件。

我使用<User | null> 类型的主题/可观察对象，因为我想在用户不可用时显示。例如。他没有登录。但是，这会导致一些问题，因此我不能再轻松地在组件中访问它。（因为null）

所以我想知道如何正确处理它。我知道这个问题看起来很简单，我希望您能提供一些提示或最佳实践，因为这不会是最后一个。

授权服务：

// initially null
private readonly _currentUser = new BehaviorSubject<ApiModel.User | null>(null);
public readonly currentUser$ = this._currentUser.asObservable();

组件：

{{user.email | async }}->

Property 'email' does not exist on type 'Observable<User | null>

User 只是一个接口。在组件中，我注入服务，然后将 observable 提供为user。

【问题讨论】：

标签： angular rxjs

【解决方案1】：

正确的语法应该是{{ (user | async)?.email }}。

如果您知道在使用async 管道时用户对象始终存在，那么您可能不需要?。

【讨论】：

那个？需要，因为该值可以为 null。

【解决方案2】：

我认为使用可选的链接运算符可能会起作用 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) 并让组件成为 {{user?.email |异步}}

【讨论】：

嗨 danibranch，感谢您的快速回答。这？当然是需要的。但也是马丁所说的括号。