Javascript 离子2-从Promise加载后在模板中显示数据

我正在使用文件插件函数readAsText将我的JSON文件转换为字符串，然后将其解析为对象，并简单地将其存储在一个局部变量中，然后将其显示在HTML模板中。问题是函数readAsText返回一个承诺，所以当我显示变量时，它仍然没有定义，数据还没有加载

我的家。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>

---

如何等待promise完成数据加载，并仅在包含数据对象后显示变量？

您可以检查变量是否已定义：

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

---

安全导航操作员是一种可能性，或者*ngIf：我想你可以这样做：object？.COMPANY？.COPMANY\u NAME可能是COPMANY\u NAME拼写错误，应该是COMPANY\u NAME。

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

export class HomePage {
    object: any = null;
}