3

I am trying to fetch my user's username from Firebase Firestore Database using Ionic and AngularFire. I am using the valueChanges() method to get the observable, then trying to interpret the observable with an async pipe. However, when I run the code, I get the following error:

error

However, when I log the observable, it appears as shown:

observable

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>

Thanks in advance for any help.

Improve this question
1
  • you can use async pipe with observables of iterables like arrays. username does not seem to be observable of array type. you can subscribe to it in the class and console log to confirm Commented Sep 26, 2019 at 1:58

3 Answers 3

Reset to default
1

You have that error because your username data is not an array so I would suggest you change your code like this. Make your username become an array then push it into array 

username: string[] = [];

this.username = this.username.push(users.valueChanges());
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Can you give a full code sample for this. I am currently getting the error: this.username.push is not a function
just update my answer. You should init with an empty array
0

Hi are you sure that users is an array?

Maybe a simple console.log(users) can give a better look of the data type you are receiving.

Improve this answer

3 Comments

Users is a AngularFirestore Document, so I don't think it is an array. What should I do in this case?
Yes, It is not an array. Let me check the documentation
I personally haven't used firestore. But I think that this is a request, where you can receive an observable and handle it
0

You should try to push/unshift to an array the mapped results from your service with a for of and return the array something like this for example:

private itemsCollection: AngularFirestoreCollection<User>
     this.itemsCollection = this.afs.collection<User>('user', ref => ref.orderBy('name','desc').limit(5));
        return this.itemsCollection.valueChanges().pipe(map( (users: User[]) =>{
                  let users = [];
                  for (const user of users) {
                    this.users.unshift(user);

                  }
                     return users          
                }))

afs is type AngularFirestore

Improve this answer

6 Comments

What is 'name' and 'desc'?
I think that this is the solution. 'name' can be a field on your firestore and 'desc' is just a descending order.
As Pablo says, 'desc' it's descending order, by default it's set 'asc' for ascending order
Where would I put this in my code? I updated my question with the full code of profile.page.ts
@SriPKunda That should be in your firebase service where you make all the firebse queries (GET,POST,PUT,DELETE), you can call that function in your profile page.ts in your ngOninit() and subscribe to it to get the array filled with users, and make the proper initialization
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.