离子模型对象未加载

Question

我正在使用Ionic 3，并拥有以下代码：

settings.html

<ion-header>
  <ion-navbar hideBackButton='false' color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Settings</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <div *ngIf="personModel">

    <ion-list>
      <ion-item>
        <ion-label>Notifications</ion-label>
        <ion-toggle [(ngModel)]="personModel.notifications" formControlName="notifications" id="notifications" ng-checked="true">Notifications</ion-toggle>
      </ion-item>
    </ion-list>

    <br>

    <ion-list radio-group [(ngModel)]="personModel.milesKm" formControlName="milesKm" id="milesKm">
      <ion-item>
        <ion-label>Km</ion-label>
        <ion-radio value="1"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Miles</ion-label>
        <ion-radio value="2"></ion-radio>
      </ion-item>
    </ion-list>

  </div>

  <div *ngIf="!personModel" style="text-align:center">
    Please Login to access settings
  </div>

</ion-content>

settings.ts

import { Component, Inject, forwardRef } from '@angular/core';
import { NavController, NavParams, Events, AlertController, IonicPage } from 'ionic-angular';
import { PersonModel } from '../model/personModel';
import { UtilityService } from '../utils/utilityService';

@IonicPage()
@Component({
  templateUrl: 'settings.html'
})
export class SettingsPage {

  public personModel: PersonModel = null;
  public utilityService: UtilityService = null;

  constructor( @Inject(forwardRef(() => UtilityService)) utilityService, public nav: NavController) {
    this.utilityService = utilityService;
    this.utilityService.getLoggedInPerson().then((data: string) => {
      this.personModel = JSON.parse(data);
    });
  }

}

当我访问页面时，构造函数会填充personModel对象。 （我添加一个断点，它确实设置了对象）。

所以我希望该页面显示“通知”＃39;和＆＃39; mileKm＆＃39;列出项目。但相反它显示：

这意味着在dom加载时，personModel对象尚未加载。

问题

如何在加载personModel的情况下加载页面？

由于