Clearing the View cache when loading an old page


#1

when I upload a new photo to my App, I want the user to move to the photos Page (in case if the user already opened it before, all old photos are loaded), and to refresh the cached view so that the new photo is downloaded. I’m trying to do this via but it doesn’t work. I don’t want to use pop() because then the pages start to jump. Any advice on how to do this, will be greatly appreciated!

  ionViewCanLeave() {
    this.navCtrl.setRoot(OldPage);
  }

#2

This is not an idiomatic way of thinking in an Angular app. You should not concern yourself with refreshing views. Templates display things in response to bound values of properties in their associated controller. Update the property in the controller and the template will automatically do what is desired.


#3

How can I update it please? Many thanks for your help here!!


#4

Won’t be able to help unless you show how you currently load the photos.


#5

Sure, here is the code. I’ve tried to also call this method from the controller (doesn’t refresh the view) and from ionViewWillEnter (same, doesn’t refersh the view). Many thanks!

  ngOnInit() {
    this.phoneStorage.SQLStorageGet('UID').then((resultSellerID) => {
      this.sellerID = 'ID';
      firebase.database().ref('/seller/' + this.ID).orderByKey().limitToFirst(6).once('value', (snapshot) => {
        snapshot.forEach(snap => {
          if(this.counter <= 4) {  //2
            let temp = {
              photo: snap.val().photo
            }
            this.object.push(temp);
            this.counter++;
            this.counter2++;
            return false;
          } else {
            this.startListingID = snap.val().listingID;
          }
        }), (this.counter === 0 && this.counter2 === 0) ? this.empty = true : this.empty = false;
      }).catch((error) => { console.log("Firebase Once Error: " + JSON.stringify(error)) });
    });
  }

#6

And where and how do you display

then?


#7
<ion-content>

  <div *ngFor="let i of object" class="listing" >
    <ion-slides pager="true" spaceBetween="20px" class="slides">
      <ion-slide *ngIf="i.photo0" class="slide">
        <ion-spinner name="bubbles" *ngIf="!i.load.photo0"></ion-spinner>
        <div class="divOuterPhoto"><div (click)="navigateToListing(i.listingID)" class="divPhoto"><img [hidden]="!i.load.photo0" (load)="i.load.photo0=true" [src]="i.photo0" class="slidePhoto"></div></div>
      </ion-slide>
    </ion-slides>
  </div>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content class="infiniteScroll" loadingSpinner="bubbles" loadingText="Loading more..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>

#8

If I am reading this correctly, there are N <ion-slides> elements, each containing one <ion-slide>. That seems strange. I thought generally one has one <ion-slides> element containing N <ion-slide> elements.

Aside from that, I don’t see how any of these properties that hang off of load that determine what is shown when are being set.


#9

I’ve got a system similar to Instagram, with multiple photos per post, but I’ve deleted the repeated code to unclutter it.

I’ve already solved this with a workaround, via a messaging say please refresh to display your latest photo. Words great! Thanks!


#10

That is not really a solution but avoiding the problem :stuck_out_tongue:


#11

Yes, I agree, and this is a VERY BAD method for avoiding this problem… If you come up with something better, please let me know.


#12

Please post something minimal and complete that people can use to reproduce the situation. Very frequently people post things that oversimplify to the extent that the underlying issue is not reproducible given the provided information.


#13

I actually don’t have a solution for this yet. The way I’m temporarily solving this is by passing a check variable set to TRUE, which displays a button (via the hidden attribute) which says “you have new photos, click here to refresh view”.