ionic 2 - 从 Promise 加载后在模板中显示数据

Question

我正在使用 File 插件函数 readAsText() 将我的 JSON 文件转换为字符串，然后将其解析为对象并将其存储在一个局部变量中，然后我想在 HTML 模板中显示该变量。问题是函数 readAsText() 返回一个 Promise，所以当我显示变量时，它仍然未定义并且数据尚未加载。

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

如何“等待”承诺完成数据加载，并仅在变量包含带有数据的对象后才显示变量？

Answer 1

你可以检查变量是否被定义：

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

或使用 elvis 运算符：

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

在组件中：

export class HomePage {
    object: any = null;
}