Angular 6 Observable 的自定义对象数组加载一次

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

Observables 不保存最后的值。阿卡。当你订阅 personagens: Observable 时，你必须等待一些东西在那里推送一个新值。因此，在您的情况下，第一次刷新时，您在将值推送到那里之前订阅了 observable。推送该值时，您的列表将被初始化。当您移动到 ​​/home 并返回 /list 时，您重新订阅了 observable，但由于没有新的推送到该 observable，因此您的列表第二次保持未初始化状态。

您可以查看 BehaviourSubject，它是从 Observable 扩展而来的 (http://reactivex.io/RxJava/javadoc/rx/subjects/BehaviorSubject.html)

向每个订阅的 Observer 发出最近观察到的项目和所有后续观察到的项目的主题。

编辑 1#

此外，您不会终止订阅。如果您不终止它们，即使组件被销毁，它们也会在应用程序中保持打开状态，从而最终造成性能瓶颈。

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

这是一篇关于如何优雅地终止订阅的好文章。

Angular/RxJs When should I unsubscribe from `Subscription`