如何在chrome调试模式下在观察者回调函数中显示this.variable值

Question

在角度应用中，给出以下代码：

this.f55Service.getByFormDeif55Key(this.formDeif55Key).subscribe(data => {
          this.stiFormDeif55Dto = data.body; 
          console.log(data.body);
});

this.f55Service.getByFormDeif55Key(this.formDeif55Key) 返回一个 Observable，我在

设置断点

console.log(data.body);

所以要确保

this.stiFormDeif55Dto = data.body; 

运行，然后在chrome调试控制台中，我输入this.stiFormDeif55Dto，但如果我将鼠标光标指向行中的stiFormDeif55Dto变量，它会返回未定义

this.stiFormDeif55Dto = data.body; 

它也返回未定义。

那么如何在调试模式控制台中显示变量 this.stiFormDeif55Dto 的值呢？

Answer 1

由于变量是在该组件的范围内定义的，不幸的是，您在 chrome 开发者控制台中调试时无法访问它。

但是，Angular 建议您有一个简洁的扩展（Angular DevTools），您可以安装在 chrome 或 firefox 上。

安装后，进入开发人员工具并选择 Angular 选项卡。在那里您将能够看到树中列出的组件。单击您的组件，在右侧，您的属性（例如

stiFormDeif55Dto

）将列出其当前值。

玩得开心！