Data gone after changing route

Question

My data is gone after changing route.

Scenario:

CommentComponent (Data shown) -> ChangeRoute -> CommentComponent (No data shown)

The data only shown at the first load, but then it's gone whenever I change the route.

I found this question looks similar with my case/issue: No data for FireStore after use of routerlink

But none of the comments/answer is helpful. So I decided to make this question.

COMPONENT.HTML: comment.component.html:

<ng-template #noComments>
  <h1>No comment yet.</h1>
</ng-template>
<div *ngIf="comments?.length > 0; else noComments">
  <h1 style="margin-bottom: 3.5vh;">Comments</h1>
  <ul *ngFor="let comment of comments">
      <li>
        <mat-card>
          <h3>{{comment.name}}</h3>
          <p>{{comment.comment}}</p>
        </mat-card>
      </li>
    </ul>
</div>

COMPONENT.TypeScript: comment.component.ts:

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

import { CommentService } from '../services/comment.service';
import { Comment } from '../models/comment';

@Component({
  selector: 'app-comment',
  templateUrl: './comment.component.html',
  styleUrls: ['./comment.component.css']
})
export class CommentComponent implements OnInit {

  comments: Comment[];

  constructor(private commentService: CommentService) {
  }

  ngOnInit() {
    this.commentService.getComments().subscribe(comments => {
      this.comments = comments;
    });
  }

}

SERVICE: comments.service.ts:

import { Injectable } from '@angular/core';
import { Comment } from '../models/comment';

import { Observable } from 'rxjs/observable';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';

@Injectable()
export class CommentService {

  commentsCollection: AngularFirestoreCollection<Comment>;
  comments: Observable<Comment[]>;

  constructor(public afs: AngularFirestore) {
    this.commentsCollection = this.afs.collection('comments');
    this.comments = this.commentsCollection.valueChanges();
  }

  getComments() {
    return this.comments;
  }

}

MODEL: comments.ts:

export interface Comment {
    name: string;
    comment: string;
}

[SOLVED]

Here's how:

In comment.service.ts, do something from:

  constructor(public afs: AngularFirestore) {
    this.commentsCollection = this.afs.collection('comments');
    this.comments = this.commentsCollection.valueChanges();
  }

  getComments() {
    return this.comments;
  }

To this:

  constructor(public afs: AngularFirestore) {
  }

  getComments() {
    this.commentsCollection = this.afs.collection('comments');
    return this.comments = this.commentsCollection.valueChanges();
  }

Answer 1

It seems to me the issue is you’re initially setting the comments on the service constructor, meaning it will only happen once. Since most likely this is an http call the observable will complete immediately after returning. In the component after changing route and navigating to it again is not restarting the observable só the subscription will never receive any values. The observable has completed already.

I believe that if you move the code you have inside the constructor to the getComments() method it should fix your problem.