How to refresh a page on Ionic 3 (Ionic, Angular 5)

Question

I’m building a favorite list which I can erase list items within a page. It’s based on Ionic sqlite storage.

I found Ionic page will keep removed ion list items until I re-enter the list page. So it needs refreshing a page upon removing an item from ionic storage.

How can I refresh a particular page? window.location.refresh() seems to refresh the entire pages… this is not what I’m trying to do.

I need to refresh a single page out of twenty pages on my app so navCtrl.setRoot() will not work either.

Thanks in advance,

You need'nt refresh the page, you need refresh the "data". You can do calling again to the function that subscribe to the get, or splice the array of your data at time you receive that the erase item is completed. Another idea is that you delete function return the list completed, but in Angular rarely you need refresh a page. Yes, I know, it's not an answer is say to you: re-think the problem. — Eliseo, May 01 '18 at 11:40
any code example for using subscribe and splice? thanks for your advice. — jamesharvey, May 01 '18 at 11:51

score 3 · Accepted Answer · answered May 01 '18 at 11:42

3

Please Try this?

this.navCtrl.setRoot(this.navCtrl.getActive().component);

answered May 01 '18 at 11:42

keval nayak

254
1
2
11

1

I'm sorry but that will refresh the whole app thus I can't use it in my app. – jamesharvey May 01 '18 at 11:51
1

The solution loses navigation – Naga Feb 16 '19 at 17:59
Ofc it does, it uses 'setRoot' – Bogdan M. Mar 29 '19 at 11:33

score 2 · Answer 2 · answered May 01 '18 at 12:29

2

If you're going for a list of items, I would suggest displaying them with an ngFor directive. That way when you update the list, it will automatically be updated where it is displayed rather than having to refresh the page or anything like that. Here's a short example:

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'});
}

Hope this helps!

answered May 01 '18 at 12:29

mclem

128
7

Thanks but this.items.pop() throws me 'cannot delete undefined' error.. any other suggestions? – jamesharvey May 01 '18 at 12:56
I tried to replicate your error, but couldn't seem to get that error :/ I would suggest filtering out the undefined values in the array like this guy did: https://stackoverflow.com/questions/9596124/javascript-how-to-clear-undefined-values-from-an-array or having your own way of ensuring that you're not trying to delete an undefined value. – mclem May 01 '18 at 13:10

score 0 · Answer 3 · answered Sep 19 '19 at 10:47

0

use NgZone. It will refresh the component.

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

constructor(private zone: NgZone) {}

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

answered Sep 19 '19 at 10:47

shanthan

554
8
8

How to refresh a page on Ionic 3 (Ionic, Angular 5)

3 Answers3

Linked