filter firestore data by name

Question

am building a social app with nativescript Angular,now am trying to add "search" UI where users will be able to search for other users by name i have users already stored in firebase firestore and i want to search for them by name ,,,, however i receive .subscribe error like

error TS2339: Property 'subscribe' does not exist on type 'void'

Here is my code:

export class HomeComponent implements OnInit {

ageValue: number = 0;
searchValue: string = "";
items: Array<any>;
name_filtered_items: Array<any>;
constructor(

  public firebaseService: FirebaseService,

  private router: Router

) { }

ngOnInit() {

this.getData();

}
getData(){

this.firebaseService.getUsers()

.subscribe(result => {

  this.items = result;

  this.age_filtered_items = result;

  this.name_filtered_items = result;

})

}

viewDetails(item){
 this.router.navigate(['/details/'+ item.payload.doc.id])
}
capitalizeFirstLetter(value){

return value.charAt(0).toUpperCase() + value.slice(1);

}
 searchByName(){

let value = this.searchValue.toLowerCase();

this.firebaseService.searchUsers(value)

.subscribe(result => {

  this.name_filtered_items = result;

  this.items = this.combineLists(result, this.age_filtered_items);

})

}

combineLists(a, b){

let result = [];



a.filter(x => {

  return b.filter(x2 =>{

    if(x2.payload.doc.id == x.payload.doc.id){

      result.push(x2);

    }

  });

});

return result;
}

}

FirebaseService.ts:

export class FirebaseService {

constructor( private ngZone: NgZone,) {}

getUsers(){

    return firebase.firestore().collection('users').snapshotChanges();

}



searchUsers(searchValue){

    return firebase.firestore().collection('users',ref => ref.where('nameToSearch', '>=', searchValue)

        .where('nameToSearch', '<=', searchValue + '\uf8ff'))

      .snapshotChanges()

     }
}

Answer 1

The nativescript-plugin-firebase doesn't support snapshotChanges(), you have to use onSnapshot method with a callback.

firebase.firestore().collection('users').onSnapshot((snapshot: firestore.QuerySnapshot) => {
  snapshot.forEach(city => console.log(city.data()));
});

Answer 2

Here is my solution with angularfire2

import { AngularFireDatabase} from 'angularfire2/database';
import { map } from 'rxjs/operators';

constructor(private database: AngularFireDatabase) {}

searchUser(firstName: string) {
    this.database.list('/profiles', ref => ref.orderByChild('firstName').equalTo(firstName))
      .snapshotChanges().pipe(map(
        changes=>{
          return changes.map(c=>({
            ... c.payload.val()
          }))
        }
      )).subscribe(users=>console.log("users with that firstname: ",users))
  }

This is how my firebase db looks: