离子框架在页面加载之前初始化值答案

【问题标题】：Ionic framework initialize values before page load离子框架在页面加载之前初始化值
【发布时间】：2018-01-10 07:49:17
【问题描述】：

我有一个页面，我从构造函数内部的存储中获取一个对象。但是当我想在 html 中获取该对象的属性时，会抛出异常Cannot read property "..." of undefined。

我在一个页面中设置数据并加载另一个页面。

首页：

let detailsResponse = this.agentService.getAgentDetails(data.data.session.ssid, data.data.session.device);
detailsResponse.then(agent => {
   this.storage.set('agent', JSON.stringify(agent.data)).then(() => {
       this.navCtrl.push(TabsPage);
   });
});

其他页面：

import {Storage} from '@ionic/storage';
....

constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public toastCtrl: ToastController,
    public alertCtrl: AlertController,
    public storage: Storage) {

    this.storage.get('agent').then((agent) => {
        this.sessionAgent = JSON.parse(agent);
    });
}

我确定 sessionAgent 对象不为空，但是当我想获取一个属性时，却得到了异常：

<ion-fab top right edge>
    <button color="default" ion-fab>{{sessionAgent.status.value}}</button>
    <ion-fab-list>
        <button color="secondary" *ngIf="sessionAgent.status.value == 'Offline'" (click)="doOnline()" ion-fab>On</button>
        <button color="danger" *ngIf="sessionAgent.status.value == 'Online'" (click)="doOffline()" ion-fab>Off</button>
    </ion-fab-list>
</ion-fab>

但是当我在访问 html 中的对象之前进行*ngIf 检查时，它解决了问题。

<ion-fab top right edge *ngIf="sessionAgent != null">
    <button color="default" ion-fab>{{sessionAgent.status.value}}</button>
    <ion-fab-list>
        <button color="secondary" *ngIf="sessionAgent.status.value == 'Offline'" (click)="doOnline()" ion-fab>On</button>
        <button color="danger" *ngIf="sessionAgent.status.value == 'Online'" (click)="doOffline()" ion-fab>Off</button>
    </ion-fab-list>
</ion-fab>

我无法理解这种行为的原因。在加载页面之前，我应该在哪里填充我的对象（休息服务调用、语言环境存储）？

【问题讨论】：

标签： javascript android ionic-framework ionic-native

【解决方案1】：

从存储中获取数据是异步的，当你获取对象时，Angular 会想要初始化页面。但是由于对象还不存在，它会抛出异常。

您应该在这里使用 NavParams。因为这会让你同步获取对象。

首页：

this.navParams.push(TabsPage, { data: agent.data });

其他页面：

constructor(private navParams: NavParams){
    this.sessionAgent = this.navParams.get('data');
}

为了防止尚未获取异步值，您可以使用
Safe Navigation operator:

<button color="default" ion-fab>{{sessionAgent?.status?.value}}</button>

【讨论】：

【解决方案2】：

在访问任何异步值之前，我会在外部<div> 中进行*ngIf 签入，*ngFor 用于列表。

<ion-fab top right edge>
    <div *ngIf="sessionAgent">
      <button color="default" ion-fab>{{sessionAgent.status.value}}</button>
      <ion-fab-list>
          <button color="secondary" *ngIf="sessionAgent.status.value == 'Offline'" (click)="doOnline()" ion-fab>On</button>
          <button color="danger" *ngIf="sessionAgent.status.value == 'Online'" (click)="doOffline()" ion-fab>Off</button>
      </ion-fab-list>
    </div>
</ion-fab>

【讨论】：