AngularFireList is not assignable to type 'Observable<Response>
Solution 1
In order to get Observable<Response>
from AngularFireList from 5.0 onwards,
use valueChanges()
function.
Check 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 save an instance of this.afDatabase.list()
in this.groups
, it will be AngularFireList
instead of FirebaseListObservable
.
Solution 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;
}
Solution 3
Angular 5.0 is refactor of AngularFireDatabase,it remove FirebaseListObservable and FirebaseObjectObservable
FirebaseListObservable ====> AngularFireList FirebaseObjectObservable====>AngularFireObject
you can follow link
Serkan ünal
Updated on July 26, 2022Comments
-
Serkan ünal almost 2 years
I have an Ionic page which is querying FirebaseListObservable to make dynamic searching on ion-searchbar. It works well with [email protected] and [email protected]. After upgrading new release AngularFire 5.0 I get an issue about FirabaseListObservable has no exported from 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 query with new api but I can not return response as an observable as you see below. Im getting error like this
**message: 'Type 'Observable[]>' is not assignable to type 'Observable'. Type 'AngularFireAction[]' is not assignable to type 'Response'. Property 'type' is missing in type 'AngularFireAction[]'.' **
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; }
-
Suraj Rao over 6 yearsDamn ninja'd..:p
-
Sampath over 6 yearsHehe
1 min
delay :D @SurajRao -
Suraj Rao over 6 yearsAlthough you may have to change the declaration type of
this.groups
if I am not wrong.. -
Eaweb almost 5 yearschanging this.afDatabase.list() to this.afDatabase.list<Item>() fixed my issue. Thanks for the link to the doc.