AngularFireList is not assigned to type "Observable <Response>

Question

I have an Ionic page that requests a FirebaseListObservable for dynamic search in the ion search bar. It works well with Angularfire2@4.0.0-rc.0 and firebase@4.5.0. After updating the new version of AngularFire 5.0, I get a message that FirabaseListObservable is not exported from the new Api.

import { Component } from '@angular/core'; import { IonicPage, NavParams, ViewController } from 'ionic-angular'; import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database'; import { Observable} from 'rxjs'; import { Response } from '@angular/http'; @IonicPage() @Component({ selector: 'page-modal-groups', templateUrl: 'modal-groups.html' }) export class ModalGroupsPage { groups: FirebaseListObservable<any>; constructor(public navParams: NavParams, public viewCtrl:ViewController, public afDatabase: AngularFireDatabase) { } getItems = (ev: any) : Observable<Response> => { this.groups = this.afDatabase.list('/Groups', { query:{ orderByChild: 'namelower', startAt: (ev.target.value), endAt: (ev.target.value + '\uf8ff') } } ); return this.groups; } chooseGroups(item:any){ this.viewCtrl.dismiss(item); // console.log(this.product); } closeModal(){ this.viewCtrl.dismiss(); } } 

 <ion-header> <ion-navbar> <ion-title>Grup Seç</ion-title> <ion-buttons end> <button ion-button color="danger" (click)="closeModal()" > Kapat </button> </ion-buttons> </ion-navbar> </ion-header> <ion-content padding> <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> <ion-list> <ion-item *ngFor="let item of groups | async" (click)="chooseGroups(item)"> {{ item.name }} </ion-item> </ion-list> <!--<button ion-item *ngFor="let item of products | async" (click)="chooseProduct(item)"> {{item.name}} </button>--> </ion-content> 

Then I changed the request to a new api, but I can not return the answer as observable, as you see below. Im getting an error like this

** message: 'The type' Observable []> 'is not assigned to the type' Observable '. The type 'AngularFireAction []' is not assigned to the type 'Response'. The 'type' property is missing in the 'AngularFireAction []' type. '**

 import { Component } from '@angular/core'; import { IonicPage, NavParams, ViewController } from 'ionic-angular'; import {AngularFireDatabase, AngularFireAction} from 'angularfire2/database'; import { Observable, BehaviorSubject} from 'rxjs'; import { Response } from '@angular/http'; /** * Generated class for the ModalGroupsPage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-modal-groups', templateUrl: 'modal-groups.html', }) export class ModalGroupsPage { items: Observable<AngularFireAction<firebase.database.DataSnapshot>[]>; group: BehaviorSubject<any>; constructor(public navParams: NavParams, public viewCtrl:ViewController, public afDatabase: AngularFireDatabase) { } getItems = (ev: any) : Observable<Response> => { this.group = new BehaviorSubject(ev); this.items = this.group.switchMap(name => this.afDatabase.list('/Groups', ref => name ? ref.orderByChild('namelower').startAt(ev.target.value).endAt(ev.target.value + '\uf8ff') : ref ).snapshotChanges()); return this.items; } 

Answer 1

To get the Observable<Response> from AngularFireList from 5.0 onwards, use the valueChanges() function.

Check out the change here .

 return this.afDatabase.list('/Groups', { query:{ orderByChild: 'namelower', startAt: (ev.target.value), endAt: (ev.target.value + '\uf8ff') } } ).valueChanges(); 

If you want to keep an instance of this.afDatabase.list() in this.groups , it will be AngularFireList instead of FirebaseListObservable .

Answer 2

You need to use .valueChanges() as shown below. Here is the doc .

  groups: AngularFireList<any>; constructor(){} getItems = (ev: any) : AngularFireList<any> { this.groups = this.afDatabase.list('/Groups', { query:{ orderByChild: 'namelower', startAt: (ev.target.value), endAt: (ev.target.value + '\uf8ff') } } ).valueChanges(); return this.groups; } 

Answer 3

In Angularfire2 5.0 or higher, if you need an observable list with a query, you should use AngularFireAction , as you see below

 import { Component } from '@angular/core'; import { IonicPage, NavParams, ViewController} from 'ionic-angular'; import {AngularFireDatabase, AngularFireAction} from 'angularfire2/database'; import { Observable } from 'rxjs/Observable'; import {EmptyObservable} from 'rxjs/observable/EmptyObservable'; // import { Response } from '@angular/http'; import * as firebase from 'firebase/app'; @IonicPage() @Component({ selector: 'page-modal-groups', templateUrl: 'modal-groups.html', }) export class ModalGroupsPage { groups: Observable<AngularFireAction<firebase.database.DataSnapshot>[]>; constructor(public navParams: NavParams, public viewCtrl:ViewController, public afDatabase: AngularFireDatabase) { } - getItems = (ev: any) : Observable<AngularFireAction<firebase.database.DataSnapshot>[]> => { if(!ev.data){ return this.groups = new EmptyObservable(); } this.groups = this.afDatabase.list('/Groups', ref => ref.orderByChild('namelower').startAt(ev.target.value).endAt(ev.target.value + '\uf8ff')).valueChanges(); // this.groups = this.groupsRef.valueChanges(); return this.groups; } chooseGroups(item:any){ // this.product.push({key:item.$key, name:item.name, price:item.price, quantity:1 }); this.viewCtrl.dismiss(item); // console.log(this.product); } closeModal(){ this.viewCtrl.dismiss(); } }