角度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`