当我打开页面时，对Firebase的调用仅发生一次，而当我导航回它时则永远不会发生

Question

Am doing a call to the firebase from my ionic 4 project that gets a list of items. it only happens once I launch the app for the first time, then if I navigate to another page then back to this page. it shows a blank list. here is my code :

import { Component, OnInit } from '@angular/core';
import { DressService, Dress } from '../services/dress.service';

@Component({
  selector: 'app-list',
  templateUrl: 'list.page.html',
  styleUrls: ['list.page.scss']
})
export class ListPage implements OnInit {
  dress: Dress[];
  constructor(private dressService: DressService,
  ) {
    this.dressService.getDresses().subscribe(res => {
      this.dress = res;
    });
  }

  ngOnInit() {

  }
  // add back when alpha.4 is out
  // navigate(item) {
  //   this.router.navigate(['/list', JSON.stringify(item)]);
  // }
}

And here is how I view the list in my HTML page

    <ion-list>
        <ion-item *ngFor="let item of dress" >
            <img src="{{item.image_1}}">
            <ion-label dir="rtl">
                <small>{{item.category}}</small>
                <br>
                <ion-text color="secondary">
                    <b>{{item.title}}</b>
                </ion-text>
                <br>
                <ion-badge color="danger">{{item.price}} EGP</ion-badge>
                <br>
                <small>{{item.city}}</small>
            </ion-label>
        </ion-item>
    </ion-list>

Answer 1

are you using a router in your app? If so, you could subscribe to a Router instance and do something when the route changes.

       constructor(private router: Router) {
        router.events.subscribe(() => shouldGetDresses());
       }

       private shouldGetDresses() {
        this.dressService.getDresses().subscribe(res => {
        this.dress = res;
       });
      }

Answer 2

Based on @SeanKPS Comment, I needed to use unsubscribe on the ngOnDestroy .

Changed my code to be like this :

import { Component, OnInit } from '@angular/core';
import { DressService, Dress } from '../services/dress.service';
import { Router } from '@angular/router';
import { Subscription, ObjectUnsubscribedError } from 'rxjs';

@Component({
  selector: 'app-list',
  templateUrl: 'list.page.html',
  styleUrls: ['list.page.scss']
})
export class ListPage implements OnInit {
  dress: Dress[];
  mySub: any;
  constructor(private dressService: DressService,
              private router: Router,
  ) { }
  ngOnInit() {
    this.mySub = this.dressService.getDresses().subscribe(res => {
      this.dress = res;
    });
  }
  ngOnDestroy() {
    // prevent memory leak when component destroyed
    this.mySub.unsubscribe();
  }
  // add back when alpha.4 is out
  // navigate(item) {
  //   this.router.navigate(['/list', JSON.stringify(item)]);
  // }
}