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>