AngularFireList를 'Observable 유형에 할당 할 수 없습니다. <Response>

Question

이온 검색 창에서 동적 검색을 수행하기 위해 FirebaseListObservable을 쿼리하는 이온 페이지가 있습니다. Angularfire2@4.0.0-rc.0과 firebase@4.5.0에서 잘 작동합니다. 새 릴리스를 업그레이드 한 후 AngularFire 5.0 FirabaseListObservable에 대한 문제가 발생하여 새 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>

그때 나는 새로운 API를 사용하여 쿼리를 변경하지만 당신은 아래를 참조로 나는 관찰과 같은 응답을 반환 할 수 없습니다. 이런 오류가 발생했습니다

** 메시지 : '유형'Observable []> '을'관찰 가능 '유형에 할당 할 수 없습니다. 유형 'AngularFireAction []'을 '응답'유형에 지정할 수 없습니다. 유형 '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; 
 
    }

당신은 같이 below.Here로 .valueChanges()를 사용할 필요가

Answer 1

는 doc입니다 **. 이후 5.0에서 AngularFireList에서 Observable<Response>을 얻기 위하여

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

, 사용 valueChanges() 기능.

변경 사항을 확인하십시오. here. 당신이 this.groups에 this.afDatabase.list()의 인스턴스를 저장하려면

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

, 그것은 AngularFireList 대신 FirebaseListObservable 될 것입니다.

Angularfire2 5.0에서

Answer 3

더 나은 쿼리로 관찰 목록이 필요하면, 당신은 당신이

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

 
}