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

Question

I am trying to retrieve a single document in a collection and display it in a view, but it always results in a blank page.

I have a service and a component.

Here is my service:

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

Here is my component:

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

The console log shows this: {imgURL: "http://someimage.jpg",caption: "This is my caption}

In my HTML view I am doing this:

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

This does not display anything on the page.

Am I missing something?

Answer 1

You cannot use ngFor over an object, ngFor used over a collection, change your view as

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