在加载数据角度4之前显示组件

Question

我目前正在使用Angular 4开发一个应用程序。我正在使用http.get从webservice加载数据。它以ng2-select显示，但遗憾的是我总是将局部变量设为空，并在加载数据之前显示UI。 有没有办法加载数据然后在Angular中显示UI？
顺便说一句，我已经在ngOnInit方法和构造函数中订阅了observable，并且在两种情况下首先显示UI然后加载数据（I  得到它在控制台中），在这种情况下，局部变量是空的。

这是服务方法

getLanguagesList2():Observable<any>{
    this.languages=new Array<IOption>();
    return this.http.get('pmnweb3/mvc/metadata/languages')
    .map(res => res.json().items);
  }

这是组件的代码     语言：数组;

public loading = true;
constructor(  private createUserService:CreateUserService,private languageService:LanguagesService) {
 this.languages=new Array<IOption> ();
  this.loading = true;
  this.languageService.getLanguagesList2().subscribe(data=>{

      data.forEach(element => {
        this.languages.push ({label:  element.languageName , value:  element.languageCode});
        console.log("label  "+  element.languageName+"  value  "+   element.languageCode);

      });

      this.loading = false;
  });
  console.log("my lang"+this.test); 


}