Angular subscribe回调内修改属性后外部访问为undefined问题求助

问题核心原因 #

你的问题由多处变量拼写不一致和作用域遗漏导致：

1. 存储图例状态的对象名不匹配：你定义的对象是existsLegend，但success、error、complete回调中使用的是existLegends，拼写差异导致实际操作的是未声明的全局变量，而非组件实例上的目标对象。
2. 面板控制变量名顺序颠倒：你定义的控制变量是isLegendPanelActive，但complete回调中赋值的是isPanelLegendActive，相当于给未声明的新属性赋值，原控制变量从未被修改。
3. 遍历逻辑遗漏this指向：complete回调中for(const key in existLegends)未加this.，默认查找全局作用域下的existLegends，找不到即为undefined，遍历逻辑完全不生效。

修正方案 #

统一所有变量拼写，补全作用域指向即可，参考代码如下：

// 变量定义阶段统一命名，使用明确类型替代any
public existLegends: Record<string, boolean> = {};
public isLegendPanelActive: boolean = false;

// 封装的请求方法
getLegend(url): Observable<Blob> {
  return this.http.get(url, { responseType: 'blob' });
}

// 订阅逻辑
this.getLegend(legendURL).subscribe(
  (data) => {
    // 拼写与定义的变量名保持一致
    this.existLegends[layer.layer.layerId] = true;
  },
  (error) => {
    this.existLegends[layer.layer.layerId] = false;
  },
  () => {
    let toShow = false;
    // 遍历补全this，指向组件实例的目标对象
    for(const key in this.existLegends){
      if(this.existLegends[key] === true){
        toShow = true;
        break;
      }
    }
    // 赋值给正确的控制变量
    this.isLegendPanelActive = toShow;
    console.log(this.isLegendPanelActive);
  }
)

注：subscribe外的console.log本身会在异步请求完成前执行，打印初始值false属于正常现象，修正后如果需要监听变量变化可配合Angular的变更检测或RxJS操作符实现。

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