AngularFireList 不可分配给类型 'Observable<Response>

Posted 2023-03-08

【中文标题】AngularFireList 不可分配给类型 \'Observable<Response>

【英文标题】：AngularFireList is not assignable to type 'Observable<Response>AngularFireList 不可分配给类型 'Observable<Response>

【发布时间】：2018-03-22 15:21:47

【问题描述】：

我有一个 Ionic 页面，它正在查询 FirebaseListObservable 以在 ion-searchbar 上进行动态搜索。它适用于 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 返回，如下所示。我收到这样的错误

**消息：'Type 'Observable[]>' 不可分配给类型 'Observable'。 类型“AngularFireAction[]”不可分配给类型“响应”。 类型“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;
  

【参考方案1】：

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

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

你可以关注link

【参考方案2】：

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

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

【参考方案3】：

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

npm install  angularfire2@4.0.0-rc0 firebase --save

【参考方案4】：

你需要使用.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;

【讨论】：

该死的忍者......：p

呵呵1 min延迟：D @SurajRao

虽然如果我没记错的话你可能不得不改变this.groups的声明类型..

【参考方案5】：

为了从 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.groups 中保存this.afDatabase.list() 的实例，它将是AngularFireList 而不是FirebaseListObservable。

【讨论】：

将 this.afDatabase.list() 更改为 this.afDatabase.list() 解决了我的问题。感谢您提供该文档的链接。