(this)关键字在angular中不起作用

Question

我想知道为什么"this"关键字在angular项目中的某些函数中不起作用。这是的一个小演示

在AppComponent.ts文件中，我使用ngOnInit生命周期钩子中的"this"调用了一个服务方法。这很好，但当我尝试在setInterval((方法中使用相同的关键字"this"调用相同的服务方法时，我得到了一个错误。所以我想知道为什么"this"在某些方法中有效，而在其他方法中无效？

这是AppComponent.ts文件

import { ServerService } from './-server.service';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(private _server: ServerService){}
ngOnInit(){
// this works fine
this._server.getUSSDTransactionStatus().subscribe(resp=>{ 
console.log('resp: ', resp); // I got response
});
let interval = setInterval(async function(){
// this is throwing error
this._server.getUSSDTransactionStatus().subscribe(resp=>{
console.log('resp: ', resp)
});
}, 5000);
}
}

这是我的服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ServerService {
constructor(private _http: HttpClient) { }
getUSSDTransactionStatus(){
return this._http.get('http://********');
}
}

Answer 1

原因是setInterval内的回调函数处于不同的词法环境中。

在ES6+中，可以使用=>定义函数；。这样，函数中的代码与函数共享相同的作用域。

setInterval(() => {
this._server.getUSSDTransactionStatus().subscribe(resp=>{
console.log('resp: ', resp)
});
}, 5000);
});

或者，您可以在使用前将一个变量分配给this，如

const _self = this;
let interval = setInterval(async function(){
// this wont throw error now
_self._server.getUSSDTransactionStatus().subscribe(resp=>{
console.log('resp: ', resp)
});
}, 5000);
}