Question

我有一个Ionic 2 Component。它呈现一个html页面。在构造函数中，它获取promise中的数据。 html使用数据（personModel）并显示值。

我的问题是html想要在promise完成获取数据之前呈现，从而导致错误。

TypeError: self.context.personModel is undefined

如何确保html在尝试渲染之前等待加载数据？

由于

HTML

<h2>{{personModel.firstName}} {{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() {
        this.personModel = [];
        // your call
    }

尝试初始化对象。

编辑：一起回答：P

Answer 2

如果您的服务可以返回Observable，则异步管道可能有所帮助。

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

Answer 3

您需要立即定义成员变量，然后将数据分配给它，即：

personModel: any;

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

在加载数据

3 个答案: