如何访问此数组中的值？

Question

我正在尝试访问数组内部的值，但控制台始终返回为未定义。该数组确实存在，并且已填充，如控制台所示。当我引用数组内部的任何内容时，就会出现问题。

this.comments$.subscribe({next:(value) => this.a_s.squad.push(value[0])});

当我控制台记录数组时

console.log(this.a_s.squad)

这是控制台消息

现在工作正常，因为我们可以知道数组确实存在并且它包含 1 个索引为 0 的对象

现在如果我要控制台记录这个

console.log(this.a_s.squad[0])

它返回为未定义

这是一个障碍，因为我将无法访问数组中的 sport_event_status 对象，因为如果我

console.log(this.a_s.squad.sport_event_status) 

我收到一条消息，指出该类型在任何[]类型上不存在

现在如果我回去添加[0]“索引”

console.log(this.a_s.squad[0].sport_event_status) 

代码中的消息错误不再存在，但在控制台中我收到此错误

为什么会出现这种情况？

Answer 1

实际上这是一个浏览器功能/奇怪之处，在下面的堆栈片段中您将看到问题！如果您打开

chome debugger

（

F12

或

right click -> inspect element)

并检查控制台选项卡，您会注意到，即使我两次记录 arr 属性（数组存储为对内存位置的引用，也可能与此相关） ！），如果我打开

arr

属性，它将始终显示最新值而不是快照值！

所以我的观点是，您看到的是最新值，而不是实际 console.log 完成时出现的值，这就是为什么在您的屏幕截图中您看到顶部显示

Array[]

，这意味着它是空的！

const arr = [1,2,3]
console.log('arr', arr);
console.log('arr[0]', arr[0]);
arr[0] = undefined;

console.log('arr', arr);
console.log('arr[0]', arr[0]);

现在我们已经澄清了这一点，让我们从角度角度重新审视您的代码，我认为您正在访问订阅外部的属性，这就是给您带来这些问题的原因，因为提供的代码非常少，因此很难猜测，但我认为您的情况会像下面这样

代码

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { of } from 'rxjs';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: ``,
})
export class App {
  comments$ = of([
    {
      sport_event_status: 'test',
    },
  ]);
  a_s: any = {
    squad: [],
  };
  name = 'Angular';

  ngOnInit() {
    this.comments$.subscribe({
      next: (value) => {
        this.a_s.squad.push(value[0]);
        console.log(this.a_s.squad[0].sport_event_status);
      },
    });
  }
}

bootstrapApplication(App);

Stackblitz Demo