각도 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>