如何将来自 firebaselistobservable 的数据存储到数组中？

Posted 2023-03-13

【中文标题】如何将来自 firebaselistobservable 的数据存储到数组中？

【英文标题】：How to store data from firebaselistobservable to an array?

【发布时间】：2017-06-27 06:02:41

【问题描述】：

我正在尝试使用 angular 2 将数据从 firebase 复制到数组中。但我无法将数据推送到数组中。

代码如下：

变量：

uid: string = '';
agencyItems: FirebaseListObservable<any[]>;
trackerItems: FirebaseListObservable<any[]>;
agencyID: any[] = [];

getData()

this.af.auth.subscribe(auth => 
        if (auth) 
            this.uid = auth.auth.uid;
        
    );

    this.getAgencyData();

    console.log("AgentID: ",this.agencyID);   
    console.log("Array Length = ",this.agencyID.length);  //PROBLEM HERE: Array agencyID is still 0.

    this.getTrackerData();

getAgencyData()：

console.log("Fetching agency data");
    this.agencyItems = this.af.database.list('/agencies/',preserveSnapshot:true);
    this.agencyItems.subscribe(snapshots => 
        snapshots.forEach(snapshot => 
            console.log(snapshot.val()._id);
            this.agencyID.push(snapshot.val()._id);
        );
    );

getTrackerData()：

for (let i = 0; i < this.agencyID.length; i++)     
    
        console.log("Fetching Tracker data");
        this.trackerItems = this.af.database.list('/tracker/' + this.agencyID[i]);
        this.trackerItems.subscribe(trackerItems => trackerItems.forEach(Titem =>
            console.log("Tracker name: " + Titem.name),
        ));
        

这是调试控制台截图：

由于我是 Web 编程的新手，一些代码似乎完全没有必要。

我在这段代码中做错了什么？我怎样才能实现它。

【参考方案1】：

问题是您检查数组长度的位置，或者更好的时间。在获取数据时进行异步调用，但在返回数据之前检查数组的长度。因此数组仍然是空的。

在getAgencyData() 中尝试以下操作：

console.log("Fetching agency data");
this.agencyItems = this.af.database.list('/agencies/',preserveSnapshot:true);
this.agencyItems.subscribe(snapshots => 
    snapshots.forEach(snapshot => 
        console.log(snapshot.val()._id);
        this.agencyID.push(snapshot.val()._id);
        console.log("Array Length = ",this.agencyID.length); // See the length of the array growing ;)
    );
    // EDIT
    this.getTrackerData();
);

【讨论】：

那么我要如何等到数据完全抓取完呢？

数据将在.subscribe() 块的末尾完全提取。但是，如果不知道您想对数组的长度或数据本身做什么，就很难告诉您最佳方法或位置。

我只想将所有“到达”数据存储到一个数组中。

但我想你已经做到了？您的控制台输出清楚地显示您的数组包含获取的数据。

不，不是。在您的方法getTrackerData() 中，您调度了一个异步调用。那就是您传递给.subscribe() 的块。你的方法到此结束。但是，只有在您的请求中的数据到达后，才会执行该块并更新您的数组。这意味着，通常来自.subscribe() 的块将在您的方法完成后执行。