Question

我的问题与这些问题非常相似，但我没有解决我的问题;

这是我的打字稿组件类：

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
     }
}

我正在使用gulp-typescript，输出就像这些;

//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)
     }
}())

当我想尝试达到＆＃39; this.test.x＆＃39;我从两个输出的浏览器中得到以下错误;

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

当我记录this.test时，它是undefined。我的TestService被正确注入，请求来到我的api，res.test包括我需要但我无法使用this.test，因为它总是未定义的。我不知道我在哪里做错了。有没有其他人可以帮助我？最后，我想问一下，在考虑浏览器兼容性等时，我应该考虑哪一个，es5或es6？

Answer 1

将console.log语句移到箭头函数内。

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

     }

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

调用getTest，启动AJAX操作
console.log调用，打印undefined。
当请求与服务器通信时，用户获取UI时间的第二个时间并没有太多发生
请求完成，调用subscribe(() =>回调。 this.test已设置。

Answer 2

您可以仅将函数TestComponent.prototype.ngOnInit替换为Arrow函数，这样从您的订阅调用中就可以访问“ this”。

无法得到这个＆＃39;订阅功能中的组件

2 个答案: