Javascript 无法获取'；这'；订阅函数中组件的定义

我的问题与这些很相似，但我没有解决我的问题

下面是我的typescript组件类：

export class Test{
     x: string;
}

export class TestComponent implements OnInit{
     test: Test;

     constructor(private testService: TestService){}

     ngOnInit(){
          this.testService.getTest()
               .subscribe((res) => { this.test = res.test;}, ...);
          console.log(this.text.x) //it becomes undefined
     }
}

我使用的是GulpTypeScript，输出如下

//when targeting es6

let testComponent = class TestComponent ... {
     constructor(testService){
          this.testService = testService;
     }

     ngOnInit(){
          this.testService.getTest()
               .subscribe((res) => {this.test = res.test;}, ...);
          console.log(this.text.x)
     }
}

//when targeting es5

var TestComponent = (function(){
     function TestComponent(testService){
         this.testService = testService;
     }

     TestComponent.prototype.ngOnInit = function(){
          var _this = this;
          this.testService.getTest()
               .subscribe(function (res) { _this.test = res.test }, ...);
          console.log(this.text.x)
     }
}())

当我想尝试达到'this.test.x'时，我从浏览器中得到以下两个输出错误：

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'x' of undefined

---

当我记录

this.test

时，它是

未定义的。我的TestService被正确注入，请求到达我的api，并且
res.test
包含我需要的内容，但是我不能使用
this.test，因为它总是未定义的。我不知道我哪里做错了。还有谁能帮我吗？最后，我想问一下，在考虑浏览器兼容性时，es5或es6应该针对哪一个？
将
console.log
语句移动到arrow函数中

ngOnInit(){
          this.testService.getTest()
               .subscribe((res) => {
                 this.test = res.test;
                 console.log(this.text.x)
          }, ...);

     }

如果您想用
this.test执行其他操作，那么您也必须将它们移到内部（或者，添加另一个函数并从回调内部调用）。基本上，如果您有一个返回可观察的
的服务，这意味着回调将不会在调用该函数的同一“帧”中运行。在原始代码中，这是操作顺序：

调用getTest时，将启动AJAX操作
调用了console.log，打印未定义
当请求与服务器通信时，用户可以获得一秒钟的UI时间，而不会发生太多事情
请求完成后，调用
subscribe（（）=>
回调。
此测试已设置

将
console.log
语句移动到arrow函数中

ngOnInit(){
          this.testService.getTest()
               .subscribe((res) => {
                 this.test = res.test;
                 console.log(this.text.x)
          }, ...);

     }

如果您想用
this.test
做其他事情，那么您也必须将它们移到内部（或者，添加另一个函数并从回调内部调用）。基本上，如果您有一个返回
可观察的
的服务，这意味着回调将不会在同一“框架”中运行您调用了该函数。在原始代码中，这是操作顺序：

调用getTest时，将启动AJAX操作
调用了console.log，打印未定义
当请求与服务器通信时，用户可以获得一秒钟的UI时间，而不会发生太多事情
请求完成后，调用
subscribe（（）=>
回调。
此测试已设置

在“subscribe（）”rxjs调用中使用“\u this.componentProperty”而不是“this.componentProperty”对我有效。
在“subscribe（）”rxjs调用中使用“\u this.componentProperty”而不是“this.componentProperty”对我有效。
您可以将函数TestComponent.prototype.ngonit替换为Arrow函数，所以“this”可以从订阅调用中访问。
您可以将函数TestComponent.prototype.ngonit替换为Arrow函数，因此“this”可以从订阅调用中访问。
什么是
'whateverItIs'
。我在您发布的代码中没有看到这一点？展开构造函数并放置
控制台.log（testService）
为了确保服务被传递/注入到构造函数中。它只是我测试类的任何属性，我写了“whateverItIs”而不是属性名。测试服务被正确注入，我的api得到了请求。你能包含一些测试类中的代码吗？谢谢。我只是想看看真正的属性名是什么，所以我可以看到哪个对象是
未定义的
。好的。这对我来说是有意义的。我希望在ngOnInit上出现一个名为console.log（this.test.x）的错误。根据您提供的代码，至少在下一个“回合”之前不会填充this.test虽然您可以在的订阅回调中调用它，但您正在接收预期的数据。这将是预期的行为。在订阅回调之前正在调用console.log（）。您需要移动到回调。最后一件事是，对于浏览器目标ES5。大多数移动浏览器尚不支持ES6（到目前为止）并且只有最新的桌面浏览器才支持ES6。最后，这些浏览器中的ES6实现还没有像ES5实现那样得到优化。什么是
“whateverItIs”
。我没有在您发布的代码中看到这一点？展开构造函数并放置
控制台.log（testService）
为了确保服务被传递/注入到构造函数中。它只是我测试类的任何属性，我写了“whateverItIs”而不是属性名。测试服务被正确注入，我的api得到了请求。你能包含一些测试类中的代码吗？谢谢。我只是想看看真正的属性名是什么，所以我可以看到哪个对象是
未定义的
。好的。这对我来说是有意义的。我希望在ngOnInit上出现一个名为console.log（this.test.x）的错误。根据您提供的代码，至少在下一个“回合”之前不会填充this.test虽然您可以在的订阅回调中调用它，但您正在接收预期的数据。这将是预期的行为。在订阅回调之前正在调用console.log（）。您需要移动到回调。最后一件事是，对于浏览器目标ES5。大多数移动浏览器尚不支持ES6（截至目前）而且只有最新的桌面浏览器才支持ES6。最后，这些浏览器中的ES6实现还没有像ES5实现那样得到优化。这里有一个链接，可以更深入地解释异步编程。这并不特定于Angular2或TypeScript。如果我想在
中使用
This.test.x
，该怎么办[formGroup]
？当我在subscribe内部调用它时，我会遇到错误，或者我应该使用模板驱动的表单而不是反应表单吗？@Katana314@martin您可能需要简单地用
*ngIf=“test”
包装表单。这样，表单和对
test.x
的引用就可以在f