離子框架初始化頁面加載之前的值

我有一個頁面，我從構造函數的存儲器中獲取一個對象。但是，當我想要在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>

我無法理解這種行爲的原因。在加載頁面之前，我應該在哪裏填充我的對象（其餘服務調用，區域設置存儲）？

來源

2017-08-02 0bj3ct

從存儲中獲取數據是異步的，當您獲取對象時，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>

來源

2017-08-02 22:16:44 robbannn

在訪問列表的任何異步值*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>

來源

2017-08-02 23:05:05

離子框架初始化頁面加載之前的值

回答

相關問題