Question

我正在使用AngularFire2从Firebase检索数据。我很难存储返回数组的可观察对象。我想稍后使用该数组进行过滤。

我使用提供程序获取数据：

import { AngularFireList, AngularFireDatabase } from 
'angularfire2/database'; //*
import { Injectable } from '@angular/core';
import firebase from 'firebase/app'; //*


@Injectable()
export class CrudProvider {

public storeList: AngularFireList<any>; //*

constructor(
public afDatabase: AngularFireDatabase //*
  ) {
this.storeList = this.afDatabase.list('/stores/'); //*
  }

  getStores(): AngularFireList<any> {     //*
    return this.storeList;                //*
  }                                       //*

}

我导入提供程序，并在页面上执行更多操作以显示数据。

search.html：

<ion-content>
    <ion-searchbar (ioninput)="getItems($event)"></ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let store of storeList | async">
            <p>{{store?.name}}</p>
            <p>{{store?.description}}</p>
            <p>{{store?.city}}</p>
        </ion-item>
    </ion-list>
</ion-content>

search.ts：

import { Observable } from 'rxjs/Observable';             //*
import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { CrudProvider } from '../../providers/crud/crud';  //*
import 'rxjs/add/operator/map';

@IonicPage()
@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
})
export class SearchPage {

public storeList: Observable<any>;                          //*
stores: any;


  constructor(public navCtrl: NavController, 
    public crud: CrudProvider                               //*
  ) { 
  }

  ionViewDidLoad() {


    this.stores=[];

    this.storeList = this.crud.getStores().valueChanges();    //*

 this.storeList.subscribe(store => this.stores.push(store));

    console.log(this.stores);

  }
}

查询成功运行，并在屏幕上显示数据库中的数据。

问题是当我尝试将Observable storeList存储到stores数组中时。 console.log（this.stores）显示一个空数组！因此，上面的代码不起作用。

我要使用数组的原因是我想使用搜索栏中的条目来实现过滤器。可观察的效果不好。我想用一个数组尝试。

任何反馈将不胜感激。谢谢。

如何在Ionic 3中将可观察到的AngularFireList存储到数组中？

0 个答案: