Angular项目订阅中数组存在对象但无length及索引访问异常求助

问题场景 #

在Angular组件的ngOnInit中调用服务获取数据，订阅服务的Observable后出现怪异行为：console.log(this.objectives)能在控制台看到完整数据，但访问this.objectives[0]返回undefined，length显示为0。代码如下：

ngOnInit() {
    this.objectivesService.getObjectives();
    this.objectivesSub = this.objectivesService._loadedObjectives.subscribe(objectives => {
        this.objectives = objectives;
        console.log(this.objectives)
        console.log(`First Object: ${this.objectives[0]}`)
        console.log(`Length: ${this.objectives.length}`)
    })
}

原因解释 #

这是浏览器控制台的引用特性导致的：

• console.log(this.objectives)打印的是数组的引用，而非当前时刻的快照。当后续数组被异步填充数据后，控制台会自动更新这个引用的显示内容，让你误以为执行console.log时数组已有数据。
• 而this.objectives[0]和this.objectives.length是在订阅回调同步执行的瞬间获取的，此时数组实际上是空的——比如服务先发出了一个空数组，之后才发出填充好的数组，但当前订阅回调只处理了第一次的空数组。

解决思路 #

1. 过滤空数据流：在订阅回调中添加判断，确保只处理有数据的数组：

this.objectivesSub = this.objectivesService._loadedObjectives.subscribe(objectives => {
    if (objectives?.length) {
        this.objectives = objectives;
        console.log(this.objectives[0]);
        console.log(`Length: ${this.objectives.length}`);
    }
})

2. 规范服务Observable暴露方式：避免直接访问服务的私有变量_loadedObjectives，建议服务暴露公共Observable（比如objectives$），并在模板中使用async管道自动处理异步数据，减少手动订阅的问题：

<!-- 模板示例 -->
<div *ngFor="let obj of objectivesService.objectives$ | async">
    {{ obj | json }}
</div>

3. 打印数据快照：调试时用JSON.stringify生成当前时刻的数组快照，避免控制台引用更新的干扰：

console.log(JSON.stringify(this.objectives)); // 打印执行时的真实数组状态

编辑：已自行修复，感谢帮助。

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