How to show data stored in Firebase on Ionic?

Question

Provider

import { AngularFireDatabase } from '@angular/fire/database';
import { Injectable } from '@angular/core';

@Injectable()
export class ContatoProvider {

  private PATH = "contatos/";

  constructor(private db: AngularFireDatabase) {

  }

  getAll() {
    return this.db.list(this.PATH, ref => ref.orderByChild('name'))
      .snapshotChanges()
      .map(changes => {
        return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
      })
  }

home ts.

import { Component } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { ContatoProvider } from '../../providers/contato/contato';
import { Observable } from 'rxjs';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  contatos:Observable<any>;

  constructor(
    public navCtrl: NavController, private toast: ToastController,
    private provider: ContatoProvider) {

    this.contatos = this.provider.getAll();
  }

**home.html**

<ion-content padding>

  <ion-card *ngFor="let contato of contatos | async">
    <ion-card-header>
      <h2><strong>{{ contato.name }}</strong></h2>
    </ion-card-header>
    <ion-card-content>
      <p>{{ contato.tel }}</p>
      <br>
      <button ion-button full (click)="editContact(contato)">
        Add
      </button>
      <button ion-button full color="danger" (click)="removeContact(contato.key)">
        Delete
      </button>
    </ion-card-content>
  </ion-card>

Answer 1

I recovered by storing the return data in an object:

vm.obj = [];
db.collection("minhaTabela").get().then((querySnapshot) => {
     querySnapshot.forEach((doc) => {
     vm.obj.push(doc.data());
   });
});

Traversing the return and pushing to a Array.