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不包含最后的值。阿卡。当你订阅人物时：Observable，你必须等待一些东西在那里推新值。因此，在您的情况下，第一次刷新时，您会在推送值之前订阅observable。按下该值后，将初始化列表。当你移动到/ home并返回/ list时，你会重新订阅observable，但由于没有任何新内容被推送到该observable，你的列表第二次仍然没有初始化。

您可以查看从Observable扩展的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 When should I unsubscribe from `Subscription`

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

1 个答案: