Angular中如何用AsyncPipe展示Observable对象的字段？

这个问题我之前在项目里也踩过坑，咱们先拆解下你遇到的两个错误原因，再给出正确的写法：

为什么之前的写法不对？ #

1. email::::: {{ app$ | async }}显示[object Object]：
   因为app$是一个Observable，当你用async管道时，它会订阅这个Observable并返回发射的整个对象，直接在模板里输出对象就会显示[object Object]，这是JavaScript里对象默认的toString结果。

2. email::::: {{ app$.email | async }}报错：
   你这里是直接访问Observable实例的email属性，但Observable本身并没有这个属性！所以app$.email会返回undefined（或者在某些场景下可能是其他非异步值），而AsyncPipe要求输入必须是Observable、Promise或者其他异步数据流，把非异步值传进去就会触发InvalidPipeArgument错误。

正确的写法 #

你需要先通过async管道订阅到app$发射的对象，再从中取出email字段，同时为了避免Observable还没发射值时出现Cannot read property 'email' of null/undefined的错误，要加上可选链操作符?.：

email::::: {{ (app$ | async)?.email }}

补充说明 #

• 如果你的app$永远会发射一个包含email的对象（不会出现null/undefined），也可以去掉可选链，但加上更安全，能处理初始加载时的空值状态。
• 如果app$是一个高阶Observable（比如发射的是另一个Observable），那你需要先在组件里用switchMap之类的操作符把它转换成普通Observable，再在模板里用async：

  // 组件里的代码
  import { switchMap } from 'rxjs/operators';
  
  appEmail$ = app$.pipe(
    switchMap(app => app.email$) // 假设app.email$是一个Observable<string>
  );
  

  然后模板里写：

  email::::: {{ appEmail$ | async }}
  

内容的提问来源于stack exchange，提问作者Jas