Description
So, I'm trying to use the angularfire Firestore, and following the documentation:
import { Component, inject } from '@angular/core';
import { Auth, User, user } from '@angular/fire/auth';
import { Firestore, collection, collectionData} from '@angular/fire/firestore';
import { from, Observable } from 'rxjs';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-user',
imports: [CommonModule],
templateUrl: './user.component.html',
styleUrl: './user.component.scss'
})
export class UserComponent {
private firestore: Firestore= inject(Firestore);
users$: Observable<any[]>;
displayName:string = "";
private auth = inject(Auth);
user$ = user(this.auth);
constructor() {
const userProfileCollection = collection(this.firestore, 'users');
this.users$ = collectionData(userProfileCollection)
}
}
This results with a firebase error:
FirebaseError: [code=invalid-argument]: Expected type '_Query', but it was: a custom _CollectionReference object
Now, looking at the Firestore example module, it uses getDoc to get a document, so let's try getDocs for a collection...
const userProfileCollection = from(getDocs(collection(this.firestore, 'users'))); userProfileCollection.forEach(value => { console.log(value.docs)})
This works in that my collection is pulled from Firestore. However, it is pulled as an array of QueryDocumentSnapshot2 documents, which is not compatible with ngFor like the angular fire Firestore documentation shows. I'm working through how to massage the data into something usable, but in the meantime, I've become frustrated at the state of the Firestore documentation in AngularFire.