Search code examples
angularfirebasegoogle-cloud-firestoreangularfire2rxjs6

"Property 'map' does not exist on type '{}'" while trying to get collection from firebase firestore


I have followed the documentation here to get data with document id from firestore.

  import { Injectable } from '@angular/core';
  import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
  import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  import 'rxjs/add/operator/map';

  @Injectable()
  export class UserService {
  userCol : AngularFirestoreCollection<UserInter>;
  users : Observable<UserInter[]>;
  constructor(private afs:AngularFirestore) { } 

  GetUsers(){
    this.userCol = this.afs.collection<UserInter>('users');
    this.users = this.userCol.snapshotChanges().pipe(
                map(changes =>{
 error here->   return changes.map(a => {
                const data = a.payload.doc.data() as UserInter;
                data.id = a.payload.doc.id;
                return data;
          })
        }))
return this.users;  
}

export interface UserInter {
email ?: string,
Firstname ?: string,
Lastname ?: string,
Address ?: string,
}

export interface UserInterid extends UserInter {id ?: string }

When I ng-serve my application I get this error

Property 'map' does not exist on type '{}'


Solution

  • I fixed that error by using map operator without pipe. This code is working

    import { Injectable } from '@angular/core';
    import { AngularFireAuth } from 'angularfire2/auth';
    import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
    import { Observable } from 'rxjs';
    import 'rxjs/add/operator/map';
    
    @Injectable()
    export class UserService {
    uid;
    userCol : AngularFirestoreCollection<UserInter>;
    users : Observable<any>;
    
    constructor(private Uauth:AngularFireAuth, private afs:AngularFirestore) { }
    
      GetUsers(){
    this.userCol = this.afs.collection('users');
    this.users = this.userCol.snapshotChanges()
               .map(action => {
                  return action.map(a => {
                    const data = a.payload.doc.data() as UserInter;
                    const id = a.payload.doc.id;
                    return {id, data };
                    })
                 })
            return this.users;  
       }
     }
    
    export interface UserInter {
    email ?: string,
    pass ?: string,
    Rpass ?: string,
    Firstname ?: string,
    Lastname ?: string,
    Society ?: string,
    Landmark ?: string,
    Address ?: string,
    PrimaryNo ?: string,
    SecondaryNo ?: string,
    ExpiryDate ?: Date,
    Orders ?: string,
    }
    
    export interface UserInterid extends UserInter {id ?: string }