Angular Get方法返回undefined 无法在TS中访问JSON对象属性

你遇到的是典型的异步时序问题：
Angular HttpClient 发起的请求是异步执行的，subscribe里的回调逻辑不会立刻执行，会等HTTP请求返回数据后才触发。如果你在subscribe回调外部（比如constructor里subscribe语句的下一行、其他同步执行的方法里）访问this.stats，此时请求还没完成，this.stats还没被赋值，自然拿到undefined。
模板里{{stats | json}}能正常显示，是Angular变更检测的机制：等后续请求完成、this.stats被赋值后，Angular会自动刷新模板渲染最新值，不代表组件初始化阶段stats就有值。

1. 把所有依赖返回数据的逻辑，全部放到subscribe回调内部 #

所有要操作stats的代码，必须写在this.stats = data赋值语句之后的回调里，才能保证拿到的是有值的对象：

stats: any;

// 更规范的做法：把数据请求放到ngOnInit生命周期里，不要写在构造函数中
ngOnInit(): void {
  this.statsData.GetEmbedded().subscribe((data: any) => {
    this.stats = data;
    // 所有操作stats的逻辑都放这里，此时数据已经完成赋值
    console.log(this.stats.preOrders[0]); // 可以正常取值
    // 后续数据处理、赋值给其他变量的逻辑都写在这
  });
}

2. 遵循Angular最佳实践，用async管道管理订阅 #

手动管理订阅容易出现内存泄漏，更推荐的写法是直接持有请求的Observable对象，在模板里用async管道自动订阅、自动处理取消订阅：

// 组件类
stats$ = this.statsData.GetEmbedded();

constructor(private statsData: StatDataService) {}

<!-- 组件模板 -->
<!-- *ngIf会在数据返回后才渲染内部内容，保证内部访问stats时一定有值 -->
<ng-container *ngIf="stats$ | async as stats">
  <div>{{ stats.preOrders[0] }}</div>
  <!-- 其他绑定逻辑 -->
</ng-container>

如果需要在TS代码中提前处理数据，可以用RxJS的操作符在pipe中处理：

stats$ = this.statsData.GetEmbedded().pipe(
  tap(res => {
    // 这里的res就是接口返回的完整数据，可直接操作
    console.log(res.preOrders[0]);
  })
);

3. 核对接口返回的数据结构 #

如果在subscribe回调内部打印this.stats还是拿不到preOrders属性，先打印完整返回值确认结构：很多接口会把实际业务数据包裹在一层通用返回结构里，比如实际数据在res.data字段下，这时候调整赋值路径即可：

this.statsData.GetEmbedded().subscribe((res: any) => {
  console.log('完整接口返回', res);
  // 假设实际数据在res.data下，就赋值res.data
  this.stats = res.data;
});

• 不要用setTimeout加固定延时的方式等数据返回，网络请求时长受网络环境影响，这种写法稳定性极差
• 如果你选择手动subscribe的写法，记得在组件销毁时调用unsubscribe()取消订阅，避免内存泄漏
• 不要给stats设置初始值{}然后在外部直接访问深层属性，初始空对象没有preOrders字段，依然会报错

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