Angular 5 HTTPCLIENT图可观察到的返回到组件的本地成员

Question

我有一个服务定义，仅执行以下操作：

@Injectable()
export class SettingService {
  settingsForm : FormGroup;
  constructor(private http:HttpClient, private httpErrorHandlerService : HttpErrorHandlerService) { }
    getPreference()   {
      return this.http.get<Preference>('/api/admin/config');
    }

这是偏好模型的片段

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));

我的问题是我的组件无法获得我服务上订阅的可观察到的副本。我将其设置为

this.utilityPreference = data;

换句话说，如果我做this.utilityPreference.utilityName，我会看到null

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

Answer 1

您面临的问题是settingService.getPreference((是异步的。因此，您的console.log首先评估，然后一段时间后，getPreference((返回和订阅块被执行。

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

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