Daten nach dem Ändern der Route gegangen

Question

Meine Daten sind nach dem Ändern der Route verschwunden.

Szenario:

CommentComponent (Data dargestellt) -> ChangeRoute -> CommentComponent (keine Daten gezeigt)

Die Daten nur beim ersten Last gezeigt, aber dann ist es weg, wenn ich die Route ändern.

fand ich diese Frage mit meinem Fall/Ausgabe ähnlich aussieht: No data for FireStore after use of routerlink

Aber keiner der Kommentare/Antwort ist hilfreich. Also habe ich beschlossen, diese Frage zu stellen.

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:

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; 
    } 

} 

MODELL: comments.ts:

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

[GELÖST]

Hier ist, wie:

In comment.service.ts, tun Sie etwas aus:

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

    getComments() { 
    return this.comments; 
    } 

Um dies:

constructor(public afs: AngularFirestore) { 
    } 

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

Answer 1

Es scheint mir das Problem In diesem Fall legen Sie zunächst die Kommentare für den Dienstkonstruktor fest Das bedeutet, dass es nur einmal vorkommen wird. Da dies höchstwahrscheinlich ein HTTP-Aufruf ist, wird das Observable sofort nach der Rückkehr abgeschlossen. In der Komponente nach dem Ändern der Route und dem Navigieren zu dieser wiederum wird das Observable nicht neu gestartet. Das Subscription erhält niemals irgendwelche Werte. Das Observable ist bereits abgeschlossen.

Ich glaube, wenn Sie den Code innerhalb des Konstruktors auf die Methode getComments() verschieben, sollte es Ihr Problem beheben.