Angular中Subscribe返回值无法在组件视图渲染，有什么可行解决方案？

可行解决步骤 #

1. 确认Observable触发上下文是否在NgZone外 #

如果你的authService.user封装了第三方SDK回调、原生事件、WebSocket消息等不在Angular NgZone管辖范围内的逻辑，常规的变更检测触发方法会失效，可通过NgZone包裹赋值逻辑修复：
首先注入NgZone：

import { NgZone } from '@angular/core';

constructor(private authService:AuthService, private ngZone: NgZone) {}

修改订阅逻辑：

this.authService.user.subscribe((userVal) => {
  this.ngZone.run(() => {
    this.obj = JSON.stringify(userVal);
    this.username = userVal.username;
    console.log(this.username);
  })
})

2. 改用async管道绑定（最推荐） #

完全规避手动订阅带来的变更检测和内存泄漏问题，不需要额外处理变更检测：
组件内声明Observable：

user$ = this.authService.user;

模板内直接绑定：

<p>用户名：{{ (user$ | async)?.username }}</p>
<p>序列化用户数据：{{ user$ | async | json }}</p>

3. 排查常见低级错误 #

• 确认组件变更检测策略如果设为ChangeDetectionStrategy.OnPush，赋值后必须调用ChangeDetectorRef.markForCheck()触发变更检测
• 检查模板绑定是否大小写错误，Angular模板变量大小写敏感，比如{{userName}}和{{username}}是完全不同的变量
• 确认赋值后没有其他逻辑（比如ngOnInit、其他订阅回调）覆盖username的取值，可在订阅赋值后加debugger断点验证变量最终值

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