Ionic searchbar list firebase deprecated


#1

Hello !

In my Ionic Application I would like search users in my firebase database with a searchbar, but the ‘list’ method in ‘AngularFireDatabase’ has changed with the new version.

I found help with the new version of angular firebase here : https://github.com/angular/angularfire2/blob/HEAD/docs/rtdb/querying-lists.md

but it does not work…

My code :

profile-search.component.ts

import { Component } from '@angular/core';
import { DataService } from '../../providers/data/data.service';
import { Profile } from "../../models/profile/profile.interface";
import { USER_LIST } from '../../mocks/profiles/profiles';

@Component({
  selector: 'app-profile-search',
  templateUrl: 'profile-search.component.html'
})
export class ProfileSearchComponent {

  query: string;

  profileList: Profile[];


  constructor(private data: DataService) {

  }

  // ! I have an error here ! //
  searchUser(query: string) { // I add '.valueChanges()' because the .subscribes is deprecated
    this.data.searchUser(query).valueChanges().subscribe(profiles => { 
      this.profileList = profiles; // The error is on the 'this.profileList'
    })
  }
}

data.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireObject } from "angularfire2/database";
import { Observable } from 'rxjs/Observable';
import { User } from "firebase/app";
import { Profile } from "../../models/profile/profile.interface";
import "rxjs/add/operator/take";

@Injectable()
export class DataService {

  profileObject: AngularFireObject<Profile>

  profileList: Observable<Profile>

  constructor(private database: AngularFireDatabase) {

  }

  getProfile(user: User) {
    this.profileObject = this.database.object(`/profiles/${user.uid}`);
    return this.profileObject;  
  } 

  // The function for search users
  searchUser(firstName: string) {
    const query = this.database.list('/profiles', ref => ref.orderByChild('firstName').equalTo(firstName))
    return query;
  }
}

profile-search.component.html

<ion-searchbar [(ngModel)]="query" (ionChange)="searchUser(query)"></ion-searchbar>

<ion-list *ngIf="profileList.length > 0">

  <ion-item *ngFor="let profile of profileList">
    <ion-avatar item-left>
      <img src="assets/img/avatar.png" alt="Avatar">
    </ion-avatar>
    <h2>{{ profile.firstName }} {{profile.lastName }}</h2>
  </ion-item>
</ion-list>

profiles.ts

import { Profile } from "../../models/profile/profile.interface";

const userList: Profile[] = [
    { firstName: 'Paul', lastName: 'Halliday', email: 'paul@paul.com', avatar: 'assets/img/avatar.png', dateOfBirth: new Date() },
    { firstName: 'John', lastName: 'Doe', email: 'john@doe.com', avatar: 'assets/img/avatar.png', dateOfBirth: new Date() },
    { firstName: 'Sarah', lastName: 'Conor', email: 'sarah@conor.com', avatar: 'assets/img/avatar.png', dateOfBirth: new Date() },
    { firstName: 'Mr', lastName: 'Dupont', email: 'mr@dupont.com', avatar: 'assets/img/avatar.png', dateOfBirth: new Date() }
];

export const USER_LIST = userList;

Thank you in advance !


#2

Your function looks very well coded, I have no time to check every of it but to degug:

deompose all files in one single fiie
make sure you have nbginx or apache logs
sudo service apache or nighix

then come back


#3

Thank you François.

In fact my error is just on my searchUser function :

searchUser(query: string) { // I add '.valueChanges()' because the .subscribes is deprecated
    this.data.searchUser(query).valueChanges().subscribe(profiles => { 
      this.profileList = profiles; // The error is on the 'this.profileList'
    })
  }

#4

Well florn it depends, it you have the regular sqlite function it shouldn’t bug.
Did you enable this in your web server (apache / nghinx).


#5

I don’t konw what you mean… I simply use AngularFireDataBase method but the querying lists has changed, I do not need sqlite function and I don’t use apache or nghinx


#6

No more help ? Please :frowning:


#7

You can import the old API from the legacy library. Look at the AngularFire2 docs, it explains how to do that. You don’t need to change any of your code except the import statement.


#8

I already try this, when I import :

import { FirebaseObjectObservable, FirebaseListObservable } from "angularfire2/database-deprecated";

I still have an error on the .subscribe


#9

You’re mixing the two APIs. Use one or the other.


#10

Sorry but it not work… no matter the API I use I have an error on the .subcribe.

When I try to add .valueChanges() before the .subscribe I have an error on the this.profileList