web-dev-qa-db-ja.com

Ionic 3（Ionic、Angular 5）でページを更新する方法

ページ内のリストアイテムを消去できるお気に入りのリストを作成しています。 _Ionic sqlite_ストレージに基づいています。

Ionicページは、リストページに再度入るまで、削除されたイオンリストアイテムを保持します。したがって、ionic storageからアイテムを削除するときに、ページを更新する必要があります。 。

特定のページを更新するにはどうすればよいですか？ window.location.refresh()はページ全体を更新しているようです…これは私がやろうとしていることではありません。

navCtrl.setRoot()も機能しないように、アプリの20ページのうち1ページを更新する必要があります。

前もって感謝します、

angularionic-frameworkionic2ionic3angular5
2
jamesharvey

これを試してみてください？

this.navCtrl.setRoot(this.navCtrl.getActive().component);
3
keval nayak

アイテムのリストを取得する場合は、ngForディレクティブを使用してアイテムを表示することをお勧めします。そうすれば、リストを更新するときに、ページなどを更新しなくても、リストが表示されている場所で自動的に更新されます。短い例を次に示します。

[〜＃〜] html [〜＃〜]

<ion-content>
 <ion-list> 
  <div *ngFor="let item of items">
    <p>{{item.name}}</p>
  </div>
  <button (click)="deleteFromArray()">Delete From Array</button>
  <button (click)="addToArray()">Add To Array</button>
 </ion-list> 
</ion-content>

TypeScript

items: any[] = [{name:'Penguin'},{name:'Seal'},{name:'Lion'}];

deleteFromArray() {
  this.items.pop();
}

addToArray() {
  this.items.Push({name: 'Whale'});
}

お役に立てれば！

2
mclem

これがあなたに必要なものかどうかはわかりません：

  • ページをルートにポップしてから、ページを押し戻します。トランジションエフェクトを適用して、エフェクトを緩和することができます。

    this.navCtrl.popToRoot().then(() =>{

   this.navCtrl.Push(YourPage);        

});
0
franc

ngZoneを使用します。コンポーネントが更新されます。

import { NgZone } from '@angular/core';

constructor(private zone: NgZone) {}

refresh() {
  this.zone.run(() => {
    console.log('force update the screen');
  });
}
0
shanthan