データがロードされる前のIonic2テンプレートURL表示

Question

私はイオン2 Componentを持っています。これは、HTMLページをレンダリングします。コンストラクタでは、データを約束してフェッチします。 htmlはデータ（personModel）を使用して値を表示します。

私の問題は、約束事がデータの取得を完了する前にレンダリングして、エラーが発生することです。

TypeError: self.context.personModel is undefined

は、どのように私はそれをレンダリングしようとする前にデータをロードするためのHTML待ちを確認していますか？あなたはすぐにメンバ変数を定義し、それにデータを割り当てる、すなわちする必要が

おかげ

HTML

<h2>{{personModel.firstName}}&nbsp;{{personModel.lastName}}</h2>

TS

@Component({ 
    templateUrl: 'build/pages/person/person.html', 
}) 

constructor() { 
    // promise that loads data 
    this.utilityService.getLoggedInPerson().then((data: string) => { 
     this.personModel = JSON.parse(data); 
    } 
} 

Answer 1

：

personModel: any; 

constructor() { 
    // promise that loads data 
    this.utilityService.getLoggedInPerson().then((data: string) => { 
     this.personModel = JSON.parse(data); 
    } 
} 

Answer 2

personModel: any[];  
constructor() { 
     this.personModel = []; 
     // your call 
    } 

オブジェクトを初期化するようにしてください。

EDIT：が一緒に答えた：P

Answer 3

をあなたのサービスが観測を返すことができる場合は、非同期パイプが役立つかもしれません。

https://angular.io/docs/ts/latest/guide/pipes.html