Angular 6 Наблюдаемый массив пользовательских объектов загружается один раз

Question

Я разрабатываю приложение, используя Angular 6 angularfire2 firestore.Сначала все выглядит хорошо, я нажимаю (/ list) маршрут, чтобы перечислить мои объекты, список в порядке.Но когда я нажимаю / Home, а затем снова нажимаю / list, чтобы снова отобразить список, список не отображается, нет ошибок в консоли.но если я обновлю страницу с помощью F5, список снова появится.

Есть идеи, что я делаю не так?

Мой сервис:

    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}`); 
      }
    }

Мой компонент:

    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);
        });
      }

    }

Я ИСПРАВЛЕНО

Я изменил услугу так:

      //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;
          });
        });
      }

И компонент списка вот так:

      personagens: Personagem[];

      constructor(private personagemServ: PersonagemService,
        private router: Router) {

      }

      ngOnInit() {
        this.personagemServ.getPersonagens$().subscribe(
          personagens => {
            this.personagens = personagens;
          });
      }

Спасибо, ребята

Answer 1

Наблюдаемые не содержат последние значения.Ака.когда вы подписываетесь на персонажей: наблюдаемые, вы должны ждать чего-то, что даст новое значение.Таким образом, в вашем случае при первом обновлении вы подписываетесь на наблюдаемое до того, как значение будет передано туда.Когда значение передается, ваш список инициализируется.Когда вы переходите в / home и обратно в / list, вы повторно подписываетесь на наблюдаемое, но поскольку к этому наблюдаемому ничего не добавляется, ваш список остается неинициализированным во второй раз.

Вы можете посмотреть на BehaviourSubject, которыйрасширенный от наблюдаемого (http://reactivex.io/RxJava/javadoc/rx/subjects/BehaviorSubject.html)

Субъект, который испускает самый последний наблюдаемый объект и все последующие наблюдаемые элементы для каждого подписанного наблюдателя.

РЕДАКТИРОВАТЬ 1 #

Кроме того, вы не прекращаете подписку.Если вы не прервете их, они останутся открытыми в приложении, даже когда компонент будет уничтожен, что в конечном итоге приведет к узкому месту в производительности.

this.personagemServ.getPersonagens().subscribe(personagens => {
          this.personagens = personagens;
          console.log('lenght', this.personagens.length);
        });

Вот хорошая статья о том, как корректно завершить подписку.

Angular / RxJs Когда мне следует отписаться от `Подписки`