Ionic Angular Firestore 不在视图中显示单个文档数据

Question

我正在尝试检索集合中的单个文档并将其显示在视图中，但它总是导致空白页。

我有一个服务和一个组件。

这是我的服务：

getReview(reviewID) {
      console.log('review id sent to service: ' + reviewID);
      this.reviewDoc = this.af.doc(`reviews/${reviewID}`);
      return this.reviewDoc.valueChanges();
  }

这是我的组件：

    ngOnInit() {
    const reviewID = this.route.snapshot.params.id;
    this.getReview(reviewID);
    }

    getReview(reviewID) {
    this.reviewDetailsService.getReview(reviewID).subscribe((data) => {
      this.review = data;
      console.log(this.review);
    });
    }

控制台日志显示： {imgURL: "http://someimage.jpg",caption: "This is my caption}

在我的 HTML 视图中，我正在这样做：

    <ion-content class="ion-padding">
    <div *ngFor="let rev of review">
        {{rev.caption}}
    </div>
    </ion-content>

这不会在页面上显示任何内容。

我错过了什么吗？

Answer 1

您不能在对象上使用 ngFor，在集合上使用 ngFor，请将您的视图更改为

 <div>
    <h1> {{review.caption}} </h1>
 </div>