Result array persists after using back button

Issue

I have a search bar ion-searchbar and when I search I store the results in a promise array. The issue I'm facing is when I search and then use the back button--my results remain in the array from the previous search.

The only way to empty my array is to do a full page reload otherwise the array will keep appending results instead of emptying it.

Initial results page

Hitting back button and searching again

From my search service it returns a promise object array: Promise<GetSearchResults[]>

My GetSearchResults object looks like so:

export interface GetSearchResults {
  title: string;
  id: string;
}

On my Search Page I have:

export class SearchPage implements OnInit {
  query: string;
  results: Promise<GetSearchResults[]>;

  constructor(
    private route: ActivatedRoute,
    private search: SearchQueryService
  ) {}

  ngOnInit() {
    this.route.paramMap.subscribe(async (params) => {
      this.query = params.get('query');

      console.log('Params -> ' + JSON.stringify(params));
      if (this.query != null) {
        console.log('Query => ' + this.query);
        this.results = this.search.searchPages(this.query);
      }
    });
  }
}

The issue I'm facing is each router navigation to my search page: this.router.navigate(['/search', this.query]);

The search page's array does not start with an empty results array if it was previously set.

this.results = this.search.searchPages(this.query); <- this array keeps appending results and isn't empty unless the page is completely reloaded

Solution

just remove your results on ionViewDidLeave or ionViewWillEnter read more about Ionic page events here

Answered By - armin momeni