ページの最初の読み込み時に補間が機能しません

Question

ユーザーがログインしてログインした後、次のページには名前が表示されません。彼が戻って再試行すると、それはその後、動作します。 COMPONENT ON

<ion-title>Your name is {{name}}</ion-title> 

：HTMLテンプレートに

name: string; 
    constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage) { 
    this.storage.get('name').then((val) => {this.name= val;}); 
    } 

Answer 1

私はあなたがstorage.set()一部のその後の外で次のページを推進していると思います。以来、私はあなたのコードにアクセスすることができないので、どのように行うべきかを示しています。

this.storage.set('name',"somename") 
.then((val) => { 
    console.log("Value is set to somename"); 
    this.navCtrl.push(NextPage); 
}); 

これは、ストレージに値を設定している前のページで行う必要があります。

この場合、値が設定されている場合にのみ次のページに移動することが保証されます。

Answer 2

ユーザーがログインしたとき、あなたはイベント（イオンイベント）公共、あなたのコンポーネントで、ちょうどを購読することができはあなたが定義したイベント。イベントが発生するたびに、あなたの財産を更新することができます。

初期の状態では、ストレージにデータが残っていないため、ストレージから取得した場合でも、アプリは機能しません。 COMPONENT ON

constructor(
    private events: Events, 
    private storage: Storage, 
    //... 
) { } 

login(/* params */) { 
    // after login successful, save name to storage 
    this.storage.set('name', JSON.stringify(name)) 
    .subscribe(() => { 
     this.events.publish('login:success'); 
    }); 
} 

：

name: string; 
constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage, private events: Events) { 
    this.storage.get('name').then((val) => {this.name= val;}); 
    this.event.subscribe('login:success',() => { 
     this.storage.get('name').then((val) => {this.name= val;}); 
    }) 
    } 
}