离子框架初始化页面加载之前的值

问题描述：

我有一个页面，我从构造函数的存储器中获取一个对象。但是，当我想要在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>

但是，当我把一个*ngIf检查访问HTML中的对象之前，它解决了这个问题。

<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>

我无法理解这种行为的原因。在加载页面之前，我应该在哪里填充我的对象（其余服务调用，区域设置存储）？

答

从存储中获取数据是异步的，当您获取对象时，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>

答

在访问列表的任何异步值*ngFor之前，我会在外部<div>中检查*ngIf。

<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>

离子框架初始化页面加载之前的值

相关推荐