Angular 11中为何接口回调赋值后外部访问company对象为undefined？

你遇到的company返回undefined的核心原因是HTTP请求的异步执行时序，和你写的服务绑定逻辑、接口返回数据本身没有关系。
具体执行流程的问题：

1. ngOnInit触发时，依次执行完getCompany()的方法调用后，代码不会停下来等待接口返回数据——因为Angular的HttpClient返回的Observable是异步的，网络请求发出后，主线程会立刻执行后续的同步代码，也就是你写的console.log(this.company)。
2. 当这行console执行的时候，接口请求还在网络往返的过程中，给this.company赋值的回调函数还没被触发，此时company还停留在声明时的默认值undefined，所以打印结果自然是undefined。
3. 等后续接口请求成功返回后，subscribe的回调才会执行，给this.company正式赋值，但这时候你之前的同步代码早就执行完了，这也是你觉得“接口明明拿到了数据，但外部访问不到company”的原因。
4. 你之前写的同类查询方法能正常运行，基本都是因为那些场景下对查询结果的读取操作是写在subscribe回调里的，没有在请求刚发出的同步阶段就读取未赋值的对象，所以没有触发过这个问题。

另外还有个隐藏的报错隐患：你写的isAlreadyCompany()方法直接读取this.company.userId，如果这个方法在接口返回前被触发，会直接抛出“无法读取undefined的属性”的运行时错误，根本走不到逻辑判断的分支。

• 所有依赖company值的逻辑，必须全部移入subscribe的回调内部执行，不能写在subscribe的外部。
  比如调整getCompany方法的结构，确保赋值完成后再触发后续读值逻辑：

  getCompany() {
    this.customerService.getById(this.userId).subscribe(response => {
      // 先给company赋值
      this.company = {
        companyName: response.data.companyName,
        userId: response.data.userId
      }
      // 再执行所有需要用到company的逻辑
      console.log(this.company);
      const hasCompany = this.isAlreadyCompany();
      this.createCustomerForm();
    })
  }
  

• 给company属性添加安全初始值，避免空值报错。
  不要只做类型声明不赋值，改成带初始空对象的形式：

  // 替换原来的company声明
  company: CompanyRequestModel = {} as CompanyRequestModel;
  

• 模板中绑定company相关属性时，使用安全导航操作符?。
  因为组件初始渲染时company还没拿到值，直接绑定属性会报错，比如把模板里的{{company.companyName}}改成{{company?.companyName}}，等接口返回值后Angular会自动触发模板更新渲染。

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