javascript - 无法获取订阅函数内组件的 'this'

Question

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

cannot access to this of component in subscribe function

'this' scope in typescript callback function

Cannot Access Component Variables in Subscribe when using chrome inspector

unable to get component variables inside a RxJS subscribe() function

这是我的 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
     }
}

我正在使用 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)
     }
}())

当我想尝试访问“this.test.x”时，我从带有两个输出的浏览器中收到以下错误；

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

当我记录this.test时，它是未定义。我的 TestService 已正确注入(inject)，请求到达我的 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 的服务，则意味着回调不会在您调用该函数的同一“框架”中运行。在您的原始代码中，这是操作顺序:

1. 调用 getTest，启动 AJAX 操作
2. 调用console.log，打印未定义。
3. 用户获得一秒钟的 UI 时间，在请求与服务器通信时没有发生太多事情
4. 请求完成，subscribe(() => 回调被调用。this.test 已设置。