How to recover documents from a Firestore(Firebase) collection in the right way?

Question

I want to recover all documents from an internal collection of a document in the Firestore for an array, in case this collection has 2 documents, however after running the code below the console.log() points an array with 3 elements, the two documents and one more Observable that I have no idea where it comes from.

let imagens: Array<any> = [];

    this.db.collection('contatos').doc(key).collection('imagens')
      .snapshotChanges()
      .forEach(elem => {
         elem.map(c => imagens.push({ key: c.payload.doc.id, ...c.payload.doc.data() }));
      })
    console.log('imagens',imagens);

console:

Can someone explain to me where this Observable comes from and how best to recover all the documents from this collection.

Note: I am developing in Angular 7 and using Angularfire2 to integrate with Firebase.

Answer 1

Observables is how angular deals with asyncronism.

let imagens: Array<any> = [];

this.db.collection('contatos').doc(key).collection('imagens')
  .snapshotChanges()
   .subscribe(response=> {
   imagens=[...response] // ou só  imagens=response
   console.log('imagens',imagens);
})

Answer 2

I got what I wanted with Eduardo Vargas' help, and my code went like this:

this.db.collection('contatos').doc(key).collection('imagens')
      .snapshotChanges()
      .subscribe(response=> {
        imagens=[response.map(c => ({ key: c.payload.doc.id, ...c.payload.doc.data() }))];
        console.log('imagens',imagens);
      });