title: Angular 6 Observable of custom object array loads once
body: <p>I'm developing an application using Angular 6 angularfire2 firestore.
  At first everything looks good, I click (/list) the route to list my objects, the list is ok.
  But when I click /Home and then again click /list to list again, no list is shown, no errors in console.
  but if I refresh the page using F5 the list appears again.</p>
  
  <p>Any ideas what am I doing wrong?</p>
  
  <p>My service:</p>
  
  <pre><code>
  
      import { AngularFirestoreCollection, AngularFirestoreDocument, AngularFirestore } from 'angularfire2/firestore';
      import { Personagem } from './../model/personagem';
      import { Observable } from 'rxjs/Observable';
      import { Injectable } from '@angular/core';
  
      @Injectable({
        providedIn: 'root'
      })
      export class PersonagemService {
  
        personagens: Observable;
        personagemColl: AngularFirestoreCollection;
        personagemDoc: AngularFirestoreDocument;
  
        constructor(private afs: AngularFirestore) { 
          this.personagemColl = this.afs.collection('personagem', ref=> ref.orderBy('nome', 'asc'));
  
          this.personagens = this.personagemColl.snapshotChanges().map(changes=> {
            return changes.map(p => {
              const data = p.payload.doc.data() as Personagem;
              data.id = p.payload.doc.id;
              return data;
            });
          });
        }
  
        getPersonagens() {
          return this.personagens;
        }
  
        addPersonagem(personagem: Personagem) {
          this.personagemColl.add(personagem);
        }
  
        deletePersonagem(personagem: Personagem) {
          this.getPersonagemDoc(personagem)
          this.personagemDoc.delete();
        }
  
        updatePersonagem(personagem: Personagem) {
          this.getPersonagemDoc(personagem)
          this.personagemDoc.update(personagem);
        }
  
        getPersonagemDoc(personagem: Personagem) {
          return this.personagemDoc = this.afs.doc(`personagem/${personagem.id}`); 
        }
      }
  
  </code></pre>
  
  <p>My Component:</p>
  
  <pre><code>
  
      import { Router } from '@angular/router';
      import { PersonagemService } from './../../services/personagem.service';
      import { Component, OnInit } from '@angular/core';
      import { Observable } from '@firebase/util';
      import { Personagem } from '../../model/personagem';
  
      @Component({
        selector: 'app-listar-personagem',
        templateUrl: './listar-personagem.component.html',
        styleUrls: ['./listar-personagem.component.css']
      })
      export class ListarPersonagemComponent implements OnInit {
  
        personagens: Personagem[];
  
        constructor(private personagemServ: PersonagemService,
          private router: Router) {
  
        }
  
        ngOnInit() {
          this.personagemServ.getPersonagens().subscribe(personagens => {
            this.personagens = personagens;
            console.log('lenght', this.personagens.length);
          });
        }
  
      }
  
  </code></pre>
  
  <p><strong>I FIXED IT</strong></p>
  
  <p>I changed the service like this:</p>
  
  <pre><code>
  
        //personagens: Observable;
        personagemColl: AngularFirestoreCollection;
        personagemDoc: AngularFirestoreDocument;
  
        constructor(private afs: AngularFirestore) { 
          this.personagemColl = this.afs.collection('personagem', ref=> ref.orderBy('nome', 'asc'));
        }
  
        getPersonagens$(): Observable {
          return this.personagemColl.snapshotChanges().map(changes=> {
            return changes.map(p => {
              const data = p.payload.doc.data() as Personagem;
              data.id = p.payload.doc.id;
              return data;
            });
          });
        }
  
  </code></pre>
  
  <p>And the list component like this:</p>
  
  <pre><code>
  
        personagens: Personagem[];
  
        constructor(private personagemServ: PersonagemService,
          private router: Router) {
  
        }
  
        ngOnInit() {
          this.personagemServ.getPersonagens$().subscribe(
            personagens => {
              this.personagens = personagens;
            });
        }
  
  </code></pre>
  
  <p>Thank you guys</p>