使用异步管道在模板上订阅

Question

当我尝试在我的模板上使用async管道时，我遇到了一个问题：

模板部分是：

<div [innerHTML]="(user$ | async).cname"></div>

组件正在尝试在Observable<IUser>字段上创建user$：

this.user$ = this.store$
  .select(fromRoot.getUserState)
  .filter((user: IUser) => user.id != null)
  .takeUntil(this.componentDestroyed$);

此Observable根据dispatch上的do(...)操作做出反应：

this.route.queryParams
  .map(params => ({id: params['id'] || undefined, token: params['token'] || undefined}))
  .filter(params => params.id != undefined && params.token != undefined)
  .takeUntil(this.componentDestroyed$)
  .do(params => this.store$.dispatch({type: 'LOAD_USER', payload: {b64: params.id}}))
  .subscribe();

尽管如此，我还没有完全实现收到的user.cname在渲染的HTML上显示。

我试图在控制台上将其打印出来，并且打印得非常正确：

this.store$
  .select(fromRoot.getUserState)
  .filter((user: IUser) => user.id != null)
  .takeUntil(this.componentDestroyed$)
  .do((user: IUser) => console.warn(user.cname))
  .subscribe();

有什么想法吗？

修改

我在obversable上添加了do运算符，以便打印出user.cname。

this.user$ = this.store$
  .select(fromRoot.getUserState)
  .filter((user: IUser) => user.id != null)
  .takeUntil(this.componentDestroyed$)
  .do((user: IUser) => console.warn(user.cname));

user.cname始终打印在控制台上，但有时会在html上呈现。