Question

要使用Ionic 3构建应用程序，我正在使用Geofire从Firebase检索一些数据，然后创建一个包含其他数据的数组。我想看看何时填充此数组，以便一旦数组向我的页面返回一些值，就可以停止加载组件。

在提供程序中，我的功能如下。我在最终的return语句中将数组转换为可观察的。

getNearby(lat, long, rad): Observable<any>  

var locations = [];
const firebaseRef: firebase.database.Reference = 
firebase.database().ref('/storeLocs/');    
const geoFire: any = new Geofire(firebaseRef);
  this.queryActive = geoFire.query({
    center: [lat, long],
    radius: rad
  });

this.queryActive.on("key_entered", function(key, 
location, distance) {
var dist: number = distance.toFixed(1);

firebase.database().ref(`/storeInfo/${key}/`)
.on("value", snap => {

locations.push({ 
  distance: dist,       
  description: snap.val().description,
  name: snap.val().name
});
return false;})});
this.locList = locations;
return Observable.of(this.locList);
}

这是页面的ts文件：

this.loading=this.loadingCtrl.create();
this.loading.present();
this.storeList = 
this.locProv.getNearby(44.642,-78.379, 50);
  this.storeList.subscribe(list => {
    if (list.length > 0) {this.loading.dismiss()};
    console.log(list);
    console.log(list.length);
  })

我在storeList观察到的数据中正确显示了我的屏幕，但console.logs分别显示了[]和0，当然，加载控制器也没有关闭。

我的数据在屏幕上正确显示。因此，当storeList变量被数据库中的数据填充时，将对其进行更新，但是订阅实际上并未捕获该更新。我还检查了storeList是否使用setTimeout更新，并且在500毫秒后检查（例如）时，控制台日志会正确打印从数据库检索到的数组。

如何观察此可观察对象的变化，以便在从数据库中检索数据时可以停止加载控制器？

谢谢。

Answer 1

您可以等待ready事件取消订阅并致电dismiss。

geoQuery.on("ready", function() {
  // This will fire once the initial data is loaded, so now we can cancel the "key_entered" event listener
  geoQuery.cancel();
});

引用GeoFire documentation

您可以使用fromEventPattern从key_entered事件创建可观察对象，并订阅该可观察对象，您可以在其中更新storeList。

您可以将整个GeoQuery设置为promise，它会在我们收到ready事件时解决，并在超时后被拒绝（不要忘记取消订阅可观察的查询+取消queryRef）。

无法观看可观察到的变化

1 个答案: