更改路线后数据消失

Question

更改路线后我的数据没有了。

场景：

CommentComponent（已显示数据）-> ChangeRoute -> CommentComponent（未显示数据）

数据只在第一次加载时显示，但后来我改变路线时它就消失了。

我发现这个问题与我的 case/issue 相似： No data for FireStore after use of routerlink

但是 comments/answer 的 none 很有帮助。所以我决定做这个问题。

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

}

服务：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;
  }

}

型号：comments.ts：

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

[已解决]

方法如下：

在 comment.service.ts 中，执行以下操作：

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

  getComments() {
    return this.comments;
  }

为此：

  constructor(public afs: AngularFirestore) {
  }

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

Answer 1

在我看来，问题在于您最初是在服务构造函数上设置注释，这意味着它只会发生一次。因为这很可能是一个 http 调用，observable 将在返回后立即完成。在组件中更改路由并再次导航到它后不会重新启动可观察对象，因此订阅将永远不会收到任何值。 Observable 已经完成。

我相信，如果将构造函数中的代码移至 getComments() 方法，它应该可以解决您的问题。

更改路线后数据消失

Data gone after changing route

firebase

angularfire

angular

google-cloud-firestore