Angular订阅Observable时出现undefined值问题求助

这问题大概率和 this 的上下文指向 或者 this.owners 的赋值逻辑 有关，咱们一步步拆解：

1. 先确认 this 指向的是不是你预期的对象 #

直接访问 ownersList 能拿到值，但用 this.owners 不行，首先要检查当前代码执行时 this 到底指向谁。你可以在出错的代码前加一行调试：

console.log(this); // 看看输出的对象里有没有owners属性，以及它的值是什么

常见的 this 跑偏场景：

• 在普通函数回调里：比如 setTimeout、事件监听的回调函数，默认 this 会指向 window（浏览器环境）或 global（Node.js），而不是你的目标对象。
• 类方法没绑定 this：如果是在类里定义的方法，直接作为回调传递时，this 会丢失绑定。

解决办法：

• 用箭头函数替代普通函数回调，箭头函数会继承外层的 this 上下文：

  setTimeout(() => {
    console.log("Owner :"+ this.owners[0].pets[0].name);
  }, 1000);
  

• 在类的构造函数里绑定方法的 this：

  class YourClass {
    constructor() {
      this.owners = ownersList;
      // 绑定this到当前实例
      this.logPetName = this.logPetName.bind(this);
    }
  
    logPetName() {
      console.log("Owner :"+ this.owners[0].pets[0].name);
    }
  }
  

• 提前保存 this 到变量（比如 self），在回调里用这个变量：

  const self = this;
  someCallback(function() {
    console.log("Owner :"+ self.owners[0].pets[0].name);
  });
  

2. 检查 this.owners 是否正确关联到 ownersList #

有可能你只是以为 this.owners 和 ownersList 是同一个东西，但实际赋值时出了问题：

• 拼写错误：比如写成 this.owner = ownersList（少了个s）
• 赋值时机不对：比如 ownersList 是异步加载的数据，你在数据还没回来时就给 this.owners 赋值了，之后 ownersList 更新了，但 this.owners 没同步
• 赋值的是副本而不是引用：比如用了 this.owners = [...ownersList] 这样的浅拷贝，但如果后续 ownersList 里的对象被修改，this.owners 里的对象不会同步（不过这个场景下你直接访问 ownersList 能拿到值的话，这个可能性低）

解决办法：

• 检查赋值语句，确保 this.owners = ownersList 是正确的，且在 ownersList 有值之后执行
• 如果是异步场景，确保在数据加载完成后再初始化 this.owners

3. 确认当前作用域下 this 能访问到 owners 属性 #

如果 ownersList 是全局变量，而 this.owners 是某个对象的属性，要确认你当前的 this 确实是那个对象的实例。比如如果是在嵌套函数里，this 的作用域已经变了，就访问不到外层对象的 owners 属性。

举个简单的正确示例：

// 假设ownersList是已定义的数组
const ownersList = [{ pets: [{ name: "旺财" }] }];

const petApp = {
  owners: ownersList,
  showPetName() {
    console.log("Owner :"+ this.owners[0].pets[0].name); // 输出"Owner :旺财"
  }
};

petApp.showPetName();

按上面的步骤排查，应该能很快找到问题所在~

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