Angular 2數據綁定的首次問題

Question

我的工作流程是在登錄後，導航到配置文件頁面，在該頁面中調用配置文件API並將其呈現爲HTML。問題是我在很短的時間內從API獲得結果，但HTML渲染需要很長時間才能渲染大約10-15秒。當我在配置文件頁面上進行刷新時，它會立即呈現HTML。 我在這裏做錯了什麼。

HTML：

<div class="row"> 
    <div class="col-md-12"> 
     <div>{{profiles.name}}</div> 
    </div> 
    <div class="col-md-12"> 
     <div>{{profiles.email}}</div> 
    </div> 
</div> 

JS：

ngOnInit() { 
    this.profilesService.getProfiles() 
    .subscribe(res => { 
     // console.log(res); 
     if(!res.err){ 
      this.profiles = res.data[0]; 
      // console.log(this.profiles); 
     } 
    }); 
} 

Answer 1

JS: 

//define profile variable as Observable 
profiles: Observable<any> 

ngOnInit() { 
    this.profiles = this.profilesService.getProfiles() 
    .map(res => { 
     //take only .data[0] 
     return res.data[0] 
    }); 
} 

HTML 
<div class="row"> 
    <div class="col-md-12"> 
     <div>{{(profiles | async)?.name}}</div> 
    </div> 
    <div class="col-md-12"> 
     <div>{{(profiles | async)?.email}}</div> 
    </div> 
</div>