ionic 2 - Promiseからロードされた後のデータをテンプレートに表示

Question

Fileプラグイン機能readAsText()を使用して、JSONファイルを文字列に変換してからオブジェクトに解析し、単に表示したいローカル変数に格納しますHTMLテンプレート内にあります。問題は関数readAsText()がプロミスを返すので、まだ変数が表示されていて未定義で、データがまだロードされていないときです。

マイhome.ts：

import { Component } from '@angular/core'; 
import { NavController} from 'ionic-angular'; 
import { File } from '@ionic-native/file'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
}) 

export class HomePage { 
    object: any; 

    constructor(
     public navCtrl: NavController, 
     public file: File, 
    ) { 
     // process that returns string, parses it into object and saves it into variable "object" 
     this.file.readAsText("file:///android_asset/www/assets/json", "Choosing_Values.json") 
     .then(result => { 
      this.object = JSON.parse(result); 
      console.log("Object: ", this.object);  // data is loaded 
     }).catch(err => console.error("file wasn't read", err)); 
     } 

そして、私のHTMLテンプレート：

<ion-content> 
... 

<p>Object: {{object.COMPANY.COPMANY_NAME}}</p>  <!-- the data is still undefined because the promise hasnt assigned the value in time--> 

... 
</ion-content> 

どのようにデータをロード終了する約束のために、「待機」、およびそれだけの後に変数を表示することができますオブジェクトにはデータが含まれていますか？

<p *ngIf="object">Object: {{object.COMPANY.COPMANY_NAME}}</p> 

やエルビス演算子使用：コンポーネントで

<p>Object: {{object?.COMPANY.COPMANY_NAME}}</p> 

を：変数が定義されている場合は、確認することができ

Answer 1

export class HomePage { 
    object: any = null; 
}