Ionic Angular Firestore not displaying single document data in view

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?

Sajeetharan · Accepted Answer · 2019-12-17 02:45:40Z

1

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

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

answered Dec 17, 2019 at 2:45

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

iamthestreets Over a year ago

I get this error now: ERROR TypeError: Cannot read property 'caption' of undefined

iamthestreets Over a year ago

With the help of your answer I was able to find out that I needed to also make my review property and array by declaring review like this review: any = [];

Collectives™ on Stack Overflow

Ionic Angular Firestore not displaying single document data in view

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related