Angular中如何在ngOnInit内正确获取subscribe返回的数据？

HTTP请求属于异步操作，subscribe回调内的赋值逻辑会在请求完成后才执行，但你将判断代码写在了subscribe外部。此时异步请求还未返回数据，this.userPropertiesTO并未被更新，自然会出现undefined的情况。

方案1：将业务逻辑移至subscribe回调内部 #

这是最直接的处理方式，确保数据赋值完成后再执行后续操作：

init(){
  this.userPropertiesTO = new UserPropertiesTO();

  this.onRoleLoad(() => {
    this.userService.retrieveUserProperties().subscribe(data => {
      this.userPropertiesTO = data;
      // 将判断逻辑移到回调内部，确保数据已更新
      if(this.userPropertiesTO.showcaseRoles?.includes(someValue)) {  
        // 执行你需要的操作
      }
    }); 
  }); 
}

这里使用可选链操作符?.，可以避免showcaseRoles本身为undefined时抛出错误。

方案2：使用async/await结合RxJS转换方法 #

如果更习惯同步代码风格，可以将Observable转为Promise，通过async/await处理：

import { firstValueFrom } from 'rxjs';

async init(){
  this.userPropertiesTO = new UserPropertiesTO();

  this.onRoleLoad(async () => {
    try {
      const data = await firstValueFrom(this.userService.retrieveUserProperties());
      this.userPropertiesTO = data;
      if(this.userPropertiesTO.showcaseRoles?.includes(someValue)) {  
        // 执行你需要的操作
      }
    } catch (error) {
      console.error('获取用户属性失败:', error);
    }
  }); 
}

注：Angular 12+建议使用firstValueFrom/lastValueFrom替代已废弃的toPromise方法。

方案3：使用RxJS操作符（响应式风格） #

如果需要保留Observable流的特性，可以用tap操作符处理数据赋值，再在subscribe中执行业务逻辑：

import { tap } from 'rxjs/operators';

init(){
  this.userPropertiesTO = new UserPropertiesTO();

  this.onRoleLoad(() => {
    this.userService.retrieveUserProperties()
      .pipe(
        tap(data => this.userPropertiesTO = data)
      )
      .subscribe(data => {
        if(data.showcaseRoles?.includes(someValue)) {  
          // 执行你需要的操作
        }
      }, error => {
        console.error('请求失败:', error);
      });
  }); 
}

• 务必处理Observable的错误回调，避免未捕获异常导致应用崩溃。
• 推荐在模板中使用async管道，自动管理订阅与取消订阅，同时避免内存泄漏：

  <div *ngIf="userPropertiesTO$ | async as userProps">
    <!-- 直接使用userProps访问数据 -->
  </div>
  

  对应组件代码：

  userPropertiesTO$: Observable<UserPropertiesTO>;
  
  init(){
    this.onRoleLoad(() => {
      this.userPropertiesTO$ = this.userService.retrieveUserProperties().pipe(
        tap(data => {
          if(data.showcaseRoles?.includes(someValue)) {
            // 执行你需要的操作
          }
        })
      );
    }); 
  }
  

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