I'm currently working on retrieving my user's username from Firebase Firestore Database using Ionic and AngularFire. I have implemented the valueChanges() method to obtain the observable and am trying to process it using an async pipe. However, upon executing the code, I encounter the following error:
Despite this, when I examine the observable through logging, it displays like so:
profile.page.ts:
import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';
import { UserService } from '../user.service'
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore'
import { Observable } from 'rxjs';
@Component({
selector: 'app-profile',
templateUrl: './profile.page.html',
styleUrls: ['./profile.page.scss'],
})
export class ProfilePage implements OnInit {
constructor(public afAuth: AngularFireAuth, public router: Router, public user: UserService, public db: AngularFirestore) {
}
ngOnInit() {
}
logout() { this.afAuth.auth.signOut(); this.router.navigate(['/login']);}
}
profile.page.html:
<ion-content>
<ion-grid>
<ion-row justify-content-center align-items-center style="height: 50%">
<ion-button color="danger" size="small" shape="round" (click)="logout()">Logout</ion-button>
<p *ngFor="let users of (username | async)">{{ users.username }}</p>
</ion-row>
</ion-grid>
</ion-content>
Appreciate any assistance provided in advance.