Angular 4 - "this" 在 ngOnInit() 上未定义，即使使用箭头

Question

我发现了很多关于这种错误的问题，我已经筋疲力尽地寻找对我不起作用的解决方案…为什么图片上的"this"没有定义？

@Component({
...
})
export class UsuarioCadastroComponent implements OnInit {
usuario = new Usuario();
mostrarBotaoResetarSenha = false;
constructor(
private usuarioService: UsuarioService,
private autenticacaoService: AutenticacaoService,
private menuService: MenuService,
private errorHandler: ErrorHandlerService,
private baseService: BasesService,
private route: ActivatedRoute,
private router: Router) { }
ngOnInit() {
const idUsuario = this.route.snapshot.params['id'];
if (idUsuario) {
this.carregarUsuario(idUsuario);
}
this.popularPickListBasesUsuarios();
}
get isEditando() {
return Boolean(this.usuario.id);
}
carregarUsuario(id: number) {
this.usuarioService.buscarPorId(id)
.then((usuarioJson) => {
this.usuario = usuarioJson;
this.mostrarBotaoResetarSenha = true;
})
.catch(erro => this.errorHandler.handle(erro));
}

请参阅此处的"this"未定义

非常感谢！

更新

在第62行，就在调试器标记的行之前，this被定义为this.usuario和this.mostrarBotaoResetarSenha.

然而，在第64行，这些都是未定义的

Answer 1

您可以尝试在carregarUsuario()方法闭包中添加this。类似的东西

carregarUsuario(id: number) {
const that = this;
that.usuarioService.buscarPorId(id)
.then((usuarioJson) => {
that.usuario = usuarioJson;
that.mostrarBotaoResetarSenha = true;
})
.catch(erro => that.errorHandler.handle(erro));
}

更新

考虑到这是有效的，我会尽我所能解释一下。关于javascript闭包，S.O.上有一些更好的解释，我只知道自己做一些调试。

基本上，promise执行的范围不在组件的范围内。我认为范围可能是由buscarPorId()方法定义的？不确定。无论如何，通过将this保存为局部变量(that(，this被纳入与执行promise相同的范围。

换句话说，this在javascript中有点神奇/特别，它的含义可以改变。通过将其保存为变量(that(，可以确保它不会更改。我相信某些javascript专家会对这种解释感到尴尬：(。阅读我链接的帖子。它更好。

Answer 2

您是否将mostrarBotaoResetarSenha定义为类属性？

mostrarBotaoResetarSenha = false; // add this
ngOnInit() {
const idUsuario = this.route.snapshot.params['id'];
if (idUsuario) {
this.carregarUsuario(idUsuario);
}
this.popularPickListBasesUsuarios();
}
get isEditando() {
return Boolean(this.usuario.id);
}
carregarUsuario(id: number) {
this.usuarioService.buscarPorId(id)
.then((usuarioJson) => {
this.usuario = usuarioJson;
this.mostrarBotaoResetarSenha = true;
})
.catch(erro => this.errorHandler.handle(erro));
}