如何从 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 的其他问题，第三，在示例中，我被告知它的异步数据，因此您应该订阅它"，我确实订阅并再次将其登录到控制台以查看我的阵列的外观.当然，在那之后我查看了更多示例，哦，原来我应该 ma​​p() 它.然后我用

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 可以被订阅，但是再次分配值时，您必须将赋值语句放在 observables 的回调函数中，不是 observables 本身.操作方法如下:

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

另一方面，.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屋！