Question

我有一个订阅语句，但是我尝试调试此语句，但是当我在VS代码中逐步执行时，该语句中始终未定义“ this”。在这种情况下，“ this.dataLoaded”是未定义的。如何在调试时获取不确定的内容？

this.router.events
            .filter(event => (event instanceof NavigationEnd))
                .subscribe((routeData: any) => {                        
                    if(!this.dataLoaded){
                      ...
                    }
                });

Answer 1

在使用.subscribe()时，可能会倾斜this。就我而言，我使用了另一个副本。它总是对我有用。也可能适合您。

var that = this; // Hear I store the this ref into another that
this.router.events
        .filter(event => (event instanceof NavigationEnd))
            .subscribe((routeData: any) => {                        
                if(!that.dataLoaded){  // Hear you can use that instead of this
                  ...
                }
            });

Answer 2

我不确定这是否是个好主意。我是初学者。但是您可以使用.bind(this)方法。

这是一个角度ts示例：

this.myService.getData().subscribe((data=>{
    this.doSomething(data);
    alert(this.somethingElse);
}).bind(this));

Answer 3

请查看closure调试器variables标签中的展开部分。实际的this将位于最高this的最上一层，其中subscribe是指组件控制器名称。每个匿名函数都会创建一个额外的闭包，在您的情况下，该闭包用let that = this括起来。在遇到断点时，VS Code默认会打开该闭包。

请尝试避免这种老式的JS入侵arrNames，因为当您使用TypeScript，Classs，ES6和arrow函数时，就不再需要这些黑客了。

Answer 4

作为一个接近从已接受的答案开始实施that = this路线的人，请保存自己并调查Tomas编写的答案。最好花一些额外的时间，并尽可能避免使用JavaScript hacks。

有关使用箭头功能保持this上下文的示例，请参见下文。

这是我最初丢失this上下文的代码：

this.settingsService.getClientSettingsByCategory(clientId, categoryId)
    .subscribe(
        this.loadJobStatusReport
    );

这是更新的代码，保留了预期的this上下文：

this.settingsService.getClientSettingsByCategory(clientId, categoryId)
    .subscribe(
        settings => this.loadJobStatusReport(settings)
    );

订阅中未定义“ this”

4 个答案: