Angular中从.subscribe()返回后无法访问this的问题求助

你的问题核心是：当把组件的successCallback作为参数传递给service的func后，在subscribe回调里调用successFn时，函数的执行上下文已不再是组件实例，导致this指向错误，无法更新组件属性。同时注意你代码里有个拼写错误：this.EnumFiled应该改为this.EnumField，这个小问题也需要修正。

下面是三种可行的解决方法：

方法1：用箭头函数包裹回调传递 #

在调用service的func时，用箭头函数包裹你的回调，箭头函数会自动捕获当前组件的上下文：

onClick(): any{
  this.EnumField = Enum.val1; // 修正拼写错误
  this.service.func(
    this.param,
    (res) => this.successCallback(res),
    (err) => this.successCallback(err)
  )
}

方法2：在构造函数中绑定this #

在组件的构造函数里，通过bind方法将successCallback的this固定为组件实例：

constructor(private service: YourService) {
  // 绑定上下文到组件实例
  this.successCallback = this.successCallback.bind(this);
}

onClick(): any{
  this.EnumField = Enum.val1; // 修正拼写错误
  this.service.func(this.param, this.successCallback, this.successCallback)
}

successCallback(res: string): void{
  this.EnumField = Enum.val2;
  this.OperationResult = res;
}

方法3：将回调定义为箭头函数 #

直接把successCallback定义为箭头函数，箭头函数不会创建自己的this，会继承外层（组件实例）的上下文：

this.EnumField = Enum.val0;
this.OperationResult = "";

onClick(): any{
  this.EnumField = Enum.val1; // 修正拼写错误
  this.service.func(this.param, this.successCallback, this.successCallback)
}

// 用箭头函数定义回调，自动继承组件上下文
successCallback = (res: string): void => {
  this.EnumField = Enum.val2;
  this.OperationResult = res;
}

内容的提问来源于stack exchange，提问作者Orit