Angular 离子模型对象未加载

我使用的是爱奥尼亚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>

当我访问页面时，构造函数会填充

personModel

对象。（我添加了一个断点，它确实设置了对象）

因此，我希望页面显示“通知”和“mileKm”列表项。但它却显示：

这意味着在加载dom时，

personModel

对象尚未加载

问题

如何在加载

personModel

的情况下加载页面

---

谢谢

建议将模型数据作为navParam发送到页面，而不是将其保存在页面中。谢谢。这是个好主意。你可以考虑把代码从你的代码>构造器< /代码>移到一个角度生命卡挂钩，比如<代码> OnInit < /C> >或<代码>

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);
    });
  }

}