如何从Firebase检索数据以传递到angularfire2/version-5中的数组 [英] How to retrieve data from Firebase to pass into an array in angularfire2/version-5

问题描述

我在Firebase中有一些简单的条目，例如:

I have some simple entries in Firebase like:

我想要的是获取这些值(每个百分比)并将它们传递到名为 labels 的数组中.这样我就可以在代码中使用该数组.这是我的问题.

All I want is, to get these values (each percentage) and pass them into an array called labels. so that I can use that array in my code. That is my question.

现在，对我来说，这似乎很容易，但显然并非如此.

Now, to me, it seemed easy but apparently it is not.

首先，我遇到的是示例中的 @angularfire 版本5差异(但在GitHub文档中易于理解). 所以第二，我尝试通过以下方式获取数据:

First of all what I faced is @angularfire version 5 differences in the examples(but easy to understand in their GitHub docs). so secondly, I try to get data with:

this.items = db.list('/percentage').valueChanges();

所以我这样做并在控制台上检查它.

so I do it and check it on the console.

然后我检查SO上的其他问题，然后在示例中，我被告知它的异步数据，因此您应该订阅它"，我确实订阅了，然后再次将其记录在控制台中，以查看数组的外观. 当然，在那之后，我检查了更多示例，哦，原来我应该 map().然后我用

then I check out other questions on SO and thirdly, in examples, I am told 'its asynchronous data so you should subscribe to it' I do subscribe and again log it in the console to see how my array would look like. and of course, after that I check out more examples and oh, turns out I should map() it. then I do it with

this.labels = db.list('/percentage').valueChanges().map(res => this.labels = res);

:

我没有收到任何错误，但是我想不出一种方法来获取这些数据作为对我有用的数组. 如果有人向我解释方法，我将非常高兴. 谢谢

I don't get any errors but I can't figure out a way to get this data as an array which would work for me. I would be really glad if someone explain a way to me. Thank you

推荐答案

angularfire2默认情况下使用Observables.如果您阅读 rxjs库上的内容，那将是有益的.

angularfire2 uses Observables by default. It's beneficial if you read up a bit on rxjs library.

this.items = db.list('/percentage').valueChanges();

this.items = db.list('/percentage').valueChanges();

根据您的屏幕截图，上面的代码将不起作用，因为db.list().valueChanges()从技术上讲是Observable.可以订阅Observable，但是要再次分配值，则必须将您的赋值语句放在Observable的回调函数中，而不是不是.这是操作方法:

The above code will not work because db.list().valueChanges() is technically an Observable, as per your screenshot. Observable can be subscribed, but then again to assign the values you have to put your assignment statement in the callback function of the observables, not the observables itself. Here is how to do it:

db.list('/percentage')
    .valueChanges()
    .subscribe(res => {
        console.log(res)//should give you the array of percentage. 
        this.labels = res;
    })

请注意，对于上述内容，没有this.lables = db.list().

Note that for the above, there is no this.lables = db.list().

另一方面，.map()只是Observables中的另一个operators.运算符用于操纵可观察对象的行为.我建议阅读文档.

On the other hand, .map() is just another operators in Observables. Operators are meant to use to manipulate the behaviour of the observables. How does each operator work is beyond the scope for this answer, I suggest reading up the docs.

如果要对数据进行一些后期处理，则将使用.map().

If you want to do some post processing on your data, that's where you will use .map().

db.list('/percentage')
    .valueChanges()
    .map(res=>{
        // do some calculations here if you want to
        return res.map(eachlLabel=> eachlLabel + " Hello World")
    })
    .subscribe(res => {
        console.log(res)//should give you the array of percentage. 
        this.labels = res;
    })

或者，您可以在subscribe回调中进行任何后期处理:

Alternatively you can do whatever post processing in your subscribe callback:

db.list('/percentage')
    .valueChanges()
    .subscribe(res => {
        console.log(res)//should give you the array of percentage.
        //do your post processing to your res here.
        res = res.map(x=> x+ " Hello World");
        this.labels = res;
    })

这篇关于如何从Firebase检索数据以传递到angularfire2/version-5中的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！