Angular 9：ngOnInit中赋值后对象仍为undefined问题求助

你遇到的这个问题其实是Angular里非常常见的异步操作时序问题，我来给你拆解清楚：

为什么会出现undefined？ #

this.userService.LoadCompanyInfo()返回的是一个Observable，这是典型的异步操作（通常对应HTTP请求），它不会阻塞代码的执行流程：

1. 你在ngOnInit里调用this.LoadSelCompanies()后，代码会立刻跳去执行下一行console.log(this.selfcompanies)
2. 这时候HTTP请求还没完成，订阅回调里的this.selfcompanies = data根本还没执行，所以自然输出undefined
3. 而订阅块内的console.log是在请求成功拿到数据后才触发的，这时候this.selfcompanies已经被赋值，所以能正常显示内容

几种解决方案 #

方案1：把依赖数据的逻辑移到订阅回调内 #

如果你的后续代码（比如表单初始化、数据处理）需要用到selfcompanies，直接把这些代码放在subscribe的回调函数里，确保数据拿到后再执行：

LoadSelCompanies() {
  this.userService.LoadCompanyInfo().subscribe(data => {
    this.selfcompanies = data;
    console.log(this.selfcompanies);
    // 在这里写需要用到selfcompanies的逻辑，比如给表单控件赋值
    this.dealForm.get('company').setValue(this.selfcompanies[0].id);
  });
}

方案2：用async/await简化异步代码（RxJS 7+推荐用firstValueFrom） #

把Observable转换成Promise，用async/await让异步代码看起来像同步执行：

import { firstValueFrom } from 'rxjs'; // 需要导入这个操作符

export class dealComponent implements OnInit { 
  selfcompanies; 
  self; 
  dealForm: FormGroup; 
  constructor(private userService: UserService) { } 

  async ngOnInit() { 
    this.AddControls(); 
    // 等待请求完成后再赋值
    this.selfcompanies = await firstValueFrom(this.userService.LoadCompanyInfo());
    console.log(this.selfcompanies); // 现在就能正常拿到值了
  } 
}

方案3：模板中使用async管道（推荐） #

如果是要在模板里渲染selfcompanies的数据，用Angular的async管道是最优雅的方式，它会自动帮你管理订阅和取消订阅，避免内存泄漏：

// 组件里定义成Observable类型
export class dealComponent implements OnInit { 
  selfcompanies$: Observable<any>; 
  dealForm: FormGroup; 
  constructor(private userService: UserService) { } 

  ngOnInit() { 
    this.AddControls(); 
    // 直接把Observable赋值给变量，不用手动订阅
    this.selfcompanies$ = this.userService.LoadCompanyInfo();
  } 
}

模板里这样用：

<!-- 用*ngIf配合async管道，确保数据加载完成后再渲染 -->
<div *ngIf="selfcompanies$ | async as companies">
  <select formControlName="company">
    <option *ngFor="let comp of companies" [value]="comp.id">{{comp.name}}</option>
  </select>
</div>

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