snapshotchanges - AngularFireList no es asignable para escribir ''Observable<Response>

snapshotchanges() map

Question

Tengo una página Ionic que está consultando FirebaseListObservable para hacer una búsqueda dinámica en la barra de búsqueda de iones. Funciona bien con [email protected] y [email protected]. Después de actualizar la nueva versión de AngularFire 5.0 aparece un problema con FirabaseListObservable que no se ha exportado de la nueva 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>

Luego cambié la consulta con una nueva API, pero no puedo devolver la respuesta como observable como se ve a continuación. Recibo un error como este

** mensaje: ''Tipo'' Observable []> ''no es asignable para escribir'' Observable ''. Tipo ''AngularFireAction []'' no es asignable para escribir ''Respuesta''. La propiedad ''tipo'' falta en el tipo ''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;
}

Answer 1

Necesita usar .valueChanges() como se muestra a continuación. Aquí está el documento .

 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 2

Para obtener Observable<Response> de AngularFireList desde 5.0 en adelante, use la función valueChanges() .

Verifica el cambio aquí .

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

Si desea guardar una instancia de this.afDatabase.list() en this.groups , será AngularFireList lugar de FirebaseListObservable .

Answer 3

En Angularfire2 5.0 o superior, si necesita una lista observable con una consulta, debe utilizar AngularFireAction como se muestra a continuación.

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();
}
}