How to use collection data from firestore ? Ionic Angular-CodePudding

Angular CLI: 13.0.4 ionic --version => 6.20.2

Hi! I'm kind of new to Ionic / Angular / Firebase. I'm using Firebase firestore as my database, I have already created the collection and filled it with data. What is the easiest solution to display a single document from the collection on a page ? Currently I'm stuck at writing it to the console and can't display it on the HTML. After hours of searching I hope someone can help me out with this one.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {AngularFirestore} from "@angular/fire/compat/firestore";

@Component({
  selector: 'app-first-place',
  templateUrl: './first-place.page.html',
  styleUrls: ['./first-place.page.scss'],
})
export class FirstPlacePage implements OnInit {

  constructor(
    private router: Router,
    private afs: AngularFirestore,
    ) {}

  ngOnInit() {
    this.afs.collection('rentplace').valueChanges()
      .subscribe(value => console.log(value[0]));
  }
}

` From the console I'm getting this output: {rentplaceTitle: 'Second page', rentplaceHref: 'secondref', rentplaceWaterBike: 44, rentplaceSup: 50, rentplaceOwnerEmail: '[email protected]', …}

I have tried cutting the array but everytime when I referred to it in the HTML I only got as a result.

CodePudding user response：

Just grab what you receive and display it as Json format with JsonPipe to debug your response object.

first-place.page.html

<div>
  {{content | json}}
</div>

first-place.page.js

.....

content: any;

ngOnInit() {
  this.afs.collection('rentplace').valueChanges()
    .subscribe(value => this.content = value);
}

.....