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>

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

Ionic Angular Firestore not displaying single document data in view

angular

ionic4

google-cloud-firestore