CODEWITHSUNDEEP
angulartypescriptfirebaseangular-routingionic4
H.Kim
H.Kim

Reputation: 277

Ionic 4 refresh tab page every time I enter

I am using tabs and cannot refresh the page every time I re-enter the page. I am using ionic 4 so I cannot use navController.

I have used ionViewWillEnter() to display data from database in my app and it works but every time I go to another page and come back to the page, it will repeat the data. (for example I am displaying 5 data from firebase. When I go to another page and re-enter the page, it displays 10(repeating the same data) then 15, 20, 25... so on).

food.page.html

<ion-list  *ngIf="showFood">
    <ion-row *ngFor='let FoodFruit of showTypeOfFood("fruit")'>
        <ion-col>
            <ion-card>
                <div class="card-title">{{FoodFruit.wtitle}}</div>
            </ion-card>
        </ion-col>
    </ion-row>
</ion-list>

food.page.ts

ionViewWillEnter(){
    this.currentUser = this.afAuth.auth.currentUser;

    if(this.currentUser == null){
     this.showFood = false;
    }
    else{
      this.showPersonalFood();
    }
}

showPersonalFood(){
    this.afAuth.auth.onAuthStateChanged(
    (user)=>{
      if(user){
        this.showFood = true;

    this.afDatabase.object('foods/').snapshotChanges().subscribe(
      (action)=>{
            if(action.payload.val())
            {
              console.log(action.payload.val());
              let items: any = action.payload.val();
              items.forEach(
                (food) =>{
                  this.foods.push(food);
                }
              );
            }
            else
            {
              console.log("No Data");
            }
          });
      }
    }
  );

}

showTypeOfFood(type)
  {
    let items:any = [];
    this.foods.forEach((Food)=>{
      if(Food.wtype == type)
      {
        items.push(Food);

      }
    });
    return items;
    }

Here, showTypeOfFood is just a function to display data from firebase. So, it perfectly shows the data in food tab page, but it just won't refresh/ clear cache or delete previous data.. How do I achieve this?

Upvotes: 2

Views: 6840

Answers (1)

Rorp
Rorp

Reputation: 136

The problem is that Ionic doesn't go well with refreshing pages. And if you ask to Ionic creators, it's not a bug but a feature...

But their is ways to bypass that:

The "do exacty what you ask for but you should not do that" way

Give an attribute to your page that change everytime you go in (like the timestamp) so Ionic is forced to update the page by treating it like a new one.

Why you shouldn't do that:

If you do that, you will overload your memory and your app may crash

The "technically you don't refresh the page, just the data, but it do the job" way

First, do everything in the ionViewDidEnter() (so everything will be done when you trully enter the page).

Then you have to:

  • Declare an attribute:
export class VisionnagePage implements OnInit{ 
    public YourVar = [];//you access it with this.YourVar
    constructor(){};
}
  • empty the global variable when you enter the page
  • put items in this var.
  • Read it (like you were reading showTypeOfFood("fruit"))

Upvotes: 2

Related Questions