Question

我有一个Ionic页面，它查询FirebaseListObservable以在ion-searchbar上进行动态搜索。它适用于Angularfire2@4.0.0-rc.0和firebase@4.5.0。升级新版本AngularFire 5.0后，我遇到一个关于FirabaseListObservable没有从新Api导出的问题。

＆＃13;

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

＆＃13;

<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>

＆＃13;

然后我用新的api更改了查询但是我不能将响应作为observable返回，如下所示。我得到这样的错误

**消息：＆＃39;输入＆＃39; Observable []＆gt;＆＃39;不能分配给＆＃39; Observable＆＃39;。输入＆＃39; AngularFireAction []＆＃39;不能分配类型＆＃39;响应＆＃39;。财产＆＃39;类型＆＃39;类型＆＃39; AngularFireAction []＆＃39;中缺少。＆＃39; **

＆＃13;

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

＆＃13;

Answer 1

为了从 5.0 开始从AngularFireList获取Observable<Response>，使用valueChanges()函数。

检查更改here。

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

如果您要在this.afDatabase.list()中保存this.groups的实例，则AngularFireList代替FirebaseListObservable。

Answer 2

您需要使用.valueChanges()，如下所示。这是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

Angular 5.0是AngularFireDatabase的重构，它删除了FirebaseListObservable和FirebaseObjectObservable

FirebaseListObservable ====> AngularFireList FirebaseObjectObservable ====> AngularFireObject

您可以关注link

Answer 4

在Angularfire2 5.0或更高版本中，如果您需要带有查询的可观察列表，则必须使用 AngularFireAction ，如下所示

＆＃13;

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

＆＃13;

Answer 5

我安装了以下版本的angularfire2和firebase：

npm install  angularfire2@4.0.0-rc0 firebase --save

AngularFireList不能分配给＆＃39; Observable <response>

5 个答案: