角度6可觀察到的自定義對象數組加載一次

Question

我正在使用Angular 6 angularfire2 firestore開發應用程序。 首先，一切看起來都不錯，我單擊（/列出）列出我的對象的路線，列表就可以了。 但是當我單擊/ 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

可觀察值不保存最后一個值。 ka 當您訂閱人物角色：可觀察時，您必須等待一些將新值推向此處的事物。 因此，在您的情況下，第一次刷新時，您先訂閱了可觀察對象，然后再將值壓入該對象。 推入值后，您的列表將初始化。 當您移至/ home並返回至/ list時，您將重新訂閱該可觀察對象，但是由於沒有新內容推送到該可觀察對象，因此您的列表第二次仍未初始化。

您可以查看BehaviourSubject，它是Observable（ 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我應該何時退訂`Subscription`