Ionic 框架在页面加载之前初始化值
Ionic framework initialize values before page load
我有一个页面,我在其中从构造函数内部的存储中获取一个对象。但是当我想在 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 对象不为 null,但是当我想获得一个 属性 时,我得到了异常:
<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>
我无法理解这种行为的原因。在加载页面之前我应该在哪里填充我的对象(休息服务调用、语言环境存储)?
从存储中获取数据是异步的,当您获取对象时,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>
在访问任何异步值之前,我会在外部 <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>
我有一个页面,我在其中从构造函数内部的存储中获取一个对象。但是当我想在 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 对象不为 null,但是当我想获得一个 属性 时,我得到了异常:
<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>
我无法理解这种行为的原因。在加载页面之前我应该在哪里填充我的对象(休息服务调用、语言环境存储)?
从存储中获取数据是异步的,当您获取对象时,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>
在访问任何异步值之前,我会在外部 <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>