Angular 5 HttpClient映射Observable返回到组件的本地成员[重复]答案

【问题标题】：Angular 5 HttpClient map Observable returned to local member of the component [duplicate]Angular 5 HttpClient映射Observable返回到组件的本地成员[重复]
【发布时间】：2018-09-04 15:15:08
【问题描述】：

我有一个服务定义，它简单地执行以下操作：

@Injectable()
export class SettingService {

  settingsForm : FormGroup;

  constructor(private http:HttpClient, private httpErrorHandlerService : HttpErrorHandlerService) { }

    getPreference()   {
      return this.http.get<Preference>('/api/admin/config');
    }

这里是偏好模型的sn-p

export class Preference {

 utilityName : string;
 utilitySupportUrl : string
 utilitySupportPhone : string;
 utilitySupportEmail : string;
 utilityPayBillUrl : string;
 utilityUrl : string;
 defaultLocale : string;

 showTOC : Boolean;
 showLastBilledDate : Boolean ;

 notificationRangeInHours : String;

在我的组件中..

settingsForm: FormGroup;
  public utilityPreference: Preference = new Preference();

 constructor(private settingService: SettingService, private messageService: MessageService, private httpErrorHandler: HttpErrorHandlerService, private fb: FormBuilder, @Inject(APP_CONFIG) private config: IAppConfig) {
     this.settingService.getPreference().subscribe((data)  => { 
     console.log(data); 
     this.utilityPreference = data;
    });
console.log("====Component's preference:"+ JSON.stringify(this.utilityPreference));

我的问题是我的组件无法获取订阅服务返回的 Observable 的副本。我把它设置为

this.utilityPreference = data;

换句话说，如果我做this.utilityPreference.utilityName，我看到的是NULL

有人可以在这里指出正确的方向吗？

【问题讨论】：

尝试在 ngOnInit 上订阅
尽量避免在构造函数中订阅，正如@Ricardo 所说，尝试 onInit，或者在它自己的方法中

标签： angular service components httpclient

【解决方案1】：

您面临的问题是 settingService.getPreference() 是异步的。所以你的 console.log 首先评估，然后，一段时间后，getPreference() 返回并执行 subscribe 块。

constructor(...) {
  this.settingService.getPreference().subscribe(data => { 
     this.utilityPreference = data;
     console.log('second', this.utilityPreference)
  });
  console.log('first', this.utilityPreference)
}

也正如其他人建议的那样，考虑将逻辑移至 ngOnInit。构造函数应该很瘦，并且只处理依赖注入。

【讨论】：

那么您是说将此代码移至 ngOnInit 将解决我的问题吗？