Ionic2 NativeStorage can not getItem（user）

Question

私はイオン2アプリを持っていて、ネイティブ/ FBを使ってNativeStorageに保存しています。私はWelcomePageを開いてログインし、データを保存するという流れです。そこから、HomePageにnavPushします。これまでのところ素晴らしいです。

しかし、私はProfilePage（tabRootでアクセス可能）を持っていますが、失敗します。その理由は、（これはホームページ上ではなくProfilePage上で動作します）私のprofile.htmlに、私はユーザー名をレンダリングする必要があります次のタグを持っていることです。

{{ user.name }} 

私はXCodeのに乗るエラーは次のとおりです。

2017 -05-02 18：40：41.657374 FoxBox App [1102：226159]エラー：ナビゲートに失敗しました：未定義はオブジェクトではありません（ 'co.user.picture'を評価）

何らかの理由で、 'co。'どこから来たのか、それが何を意味するのかはわかりません。ここで

はWelcomePageコードです：ここで

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

import { HomePage } from '../home/home'; 
import { AboutPage } from '../about/about'; 


import { Facebook, NativeStorage } from 'ionic-native'; 
//import { FacebookAuth, User, Auth } from '@ionic/cloud-angular'; 
import { CloudSettings, CloudModule } from '@ionic/cloud-angular'; 

import {GoogleAnalytics} from 'ionic-native'; 

@Component({ 
    selector: 'page-welcome', 
    templateUrl: 'welcome.html' 
}) 
export class WelcomePage { 

    FB_APP_ID: number = 1234567890; 

    homePage = HomePage; 
    aboutPage = AboutPage; 

    constructor(
    public navCtrl: NavController, 
    //public facebookAuth: FacebookAuth, 
    //public auth: Auth, 
    //public user: User, 
    ) { 

    Facebook.browserInit(this.FB_APP_ID, "v2.8"); 

    } 


doFbLogin(){ 
    //alert("fb is logged in"); 
    let permissions = new Array(); 
    let nav = this.navCtrl; 
    //the permissions your facebook app needs from the user 
    permissions = ["public_profile"]; 


    Facebook.login(permissions) 
    .then(function(response){ 
     let userId = response.authResponse.userID; 
     let params = new Array(); 

     //Getting name and gender properties 
     Facebook.api("/me?fields=name,gender", params) 
     .then(function(user) { 
     user.picture = "https://graph.facebook.com/" + userId + "/picture?type=large"; 
     //now we have the users info, let's save it in the NativeStorage 
     NativeStorage.setItem('user', 
     { 
      name: user.name, 
      gender: user.gender, 
      picture: user.picture, 
      email: user.email, 
     }) 
     .then(function(){ 
      nav.push(HomePage); 
      console.log("User Data Stored"); 
     }, function (error) { 
      console.log(error); 
     }) 
     }) 
    }, function(error){ 
     console.log(error); 
    }); 

    } 
} 

は、ホームページのコードです：

import { Component } from '@angular/core'; 
import { NavController, Platform } from 'ionic-angular'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

import { ClaimPage } from '../claim/claim'; 


import { SocialSharing } from '@ionic-native/social-sharing'; 

import { Facebook, NativeStorage } from 'ionic-native'; 
//import { FacebookAuth, User, Auth } from '@ionic/cloud-angular'; 
import { CloudSettings, CloudModule } from '@ionic/cloud-angular'; 

import {GoogleAnalytics} from 'ionic-native'; 



@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    posts: any; 
    sendme: any; 
    claimPage = ClaimPage; 
    user: any; 
    userReady: boolean = false; 

    constructor(
    public navCtrl: NavController, 
    public http: Http, 
    private sharingVar: SocialSharing, 
    public platform: Platform, 
    ) { 


    // Check to see if user already exists (via FB login) 
    let env = this; 
    NativeStorage.getItem('user') 
    .then(function (data){ 
     env.user = { 
     name: data.name, 
     gender: data.gender, 
     picture: data.picture 
     }; 
     env.userReady = true; 
     // console.log(data.name); 
    }, function(error){ 
     console.log(error); 
    }); 


    this.platform.ready().then(() => { 
     //alert("platform is ready"); 
     GoogleAnalytics.trackView("Home-Page", "http://foxboxapp.com/home", true); 
     //alert("GA called"); 
    }); 

    this.http.get('http://getyourtryston.com/foox/sample.php').map(res => res.json()).subscribe(data => { 
     this.posts = data.data.children; 

    }); 

    } 



    otherShare(){ 
    this.sharingVar.share("FoxBox App","Get Awesome College Deals",null/*File*/,"http://fooxsocial.com") 
    .then(()=>{ 
     //alert("Success"); 
     }, 
    ()=>{ 
     alert("Sharing Failed!") 
     }) 

    } 

} 

そしてここでは、失敗しProfilePageコードです：

import { Component } from '@angular/core'; 
import { NavController, Platform } from 'ionic-angular'; 

import { WelcomePage } from '../welcome/welcome'; 



import {GoogleAnalytics} from 'ionic-native'; 
import { SocialSharing } from '@ionic-native/social-sharing'; 
import { Facebook, NativeStorage } from 'ionic-native'; 
//import { FacebookAuth, User, Auth } from '@ionic/cloud-angular'; 
//import { CloudSettings, CloudModule } from '@ionic/cloud-angular'; 

@Component({ 
    selector: 'page-about', 
    templateUrl: 'about.html' 
}) 

export class AboutPage { 

    user: any; 
    userReady: boolean = false; 

    constructor(
    public navCtrl: NavController, 
    public platform: Platform, 
    private sharingVar: SocialSharing, 
    //public facebookAuth:FacebookAuth, 
    //public auth:Auth,  
    ) { 



    // Check to see if user already exists (via FB login) 
    let env = this; 
    NativeStorage.getItem('user') 
    .then(function (data){ 
     env.user = { 
     name: data.name, 
     gender: data.gender, 
     picture: data.picture 
     }; 
     env.userReady = true; 
     // console.log(data.name); 
    }, function(error){ 
     console.log(error); 
    }); 



    // PLATFORM READY, do your thang! 
    this.platform.ready().then(() => { 

     // Ping Google Analytics 
     GoogleAnalytics.trackView("Profile Page", "http://foxboxapp.com/home", true); 


    }); 


    } 

    otherShare(){ 
    this.sharingVar.share("FOOX Social App","Get Awesome College Deals",null/*File*/,"http://fooxsocial.com") 
    .then(()=>{ 
     //alert("Success"); 
     }, 
    ()=>{ 
     alert("Sharing Failed!") 
     }) 

    } 


    doFbLogout(){ 
    var nav = this.navCtrl; 
    Facebook.logout() 
    .then(function(response) { 
     //user logged out so we will remove him from the NativeStorage 
     NativeStorage.remove('user'); 
     nav.push(WelcomePage); 
    }, function(error){ 
     console.log(error); 
    }); 
    } 
} 

そして、ここではProfilePageです.html

<ion-header> 

    <ion-navbar color="light" hideBackButton="true"> 

     <ion-buttons end> 
     <button ion-button icon-only (click)="otherShare()"> 
     <ion-icon name="share"></ion-icon> 
     </button> 
    </ion-buttons> 

    </ion-navbar> 

</ion-header> 

<ion-content> 

<ion-card class="pCard"> 
    <div class="pHeader" align="center"> 
    <div *ngIf="user" class="pImgBox" align="center"> 
     <img class="pImage" src="{{ user.picture }}"> 
    </div> 
    <div class="pUsername" align="center"> 
     <div *ngIf="user"> {{user.name}} </div> 
     <br> 
     <span class="pSchool">(Santa Monica College)</span> 
    </div> 
    </div> 

    <ion-list> 
    <ion-item class="pItems"> 
     Share App 
    </ion-item> 
    <ion-item class="pItems"> 
     Give Us Feedback 
    </ion-item> 
    <ion-item class="pItems"> 
     Suggest Vendors 
    </ion-item> 
    <ion-item class="pItems"> 
     Privacy & Terms of Service 
    </ion-item> 
    <ion-item class="pItems"> 
     Log Out 
    </ion-item> 
    <ion-item class="pItems"> 
     Delete Account 
    </ion-item> 
    </ion-list> 
</ion-card> 

<button ion-button round (click)="doFbLogout()">Log Out</button> 

</ion-content> 

私のProfilePage.htmlから{{user.name}}と{{user.picture}}を削除すると、問題はないようです。実際、ProfilePageで気付いた場合は、AlertとConsole.logの両方に問題なくユーザー名（data.name）を使用できます。

私は初心者であり、この点について簡潔なヘルプをいただければ幸いです。ありがとうございました。

Answer 1

最終的に解決策が見つかりました。 htmlファイル（ProfilePage.html）で、私は条件付きngIf *を使用：

<div *ngIf="user"> {{user.name}} </div> 

これは、それがNativeStorageから読み取って「ユーザー」オブジェクトがもはやNULLであることを、このような遅延を紹介します。

また、エルビス演算子はまた、私の作品：

<div> {{ user?.name }} </div>