如何从Firebase检索数据以传入angularfire2/version-5中的数组

Question

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

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

现在,对我而言,这似乎很容易,但显然不是.

首先我所面对的是示例中的@angularfire第5版差异(但在他们的GitHub文档中很容易理解).所以其次,我尝试获取数据:

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

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

然后我查看关于SO的其他问题,第三,在示例中,我被告知'它的异步数据,所以你应该订阅它'我订阅并再次在控制台中记录它以查看我的数组的样子. 当然,在那之后我会查看更多的例子哦,事实证明我应该映射()它.然后我这样做

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

:

我没有得到任何错误,但我不知道如何将这些数据作为一个对我有用的数组.如果有人向我解释一个方法,我会很高兴.谢谢

Answer 1

angularfire2Observables默认使用.如果你在rxjs库上读一点,这是有益的.

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

上面的代码不起作用,因为db.list().valueChanges()从技术上讲Observable,根据你的截图.可以订阅Observable,但是再次分配你必须将赋值语句放在observables的回调函数中的值,而不是 observable本身.这是怎么做的:

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

请注意,对于上述情况,没有this.lables = db.list().

另一方面,.map()它只是operatorsObservables中的另一个.运算符旨在用于操纵可观察对象的行为.每个操作员的工作方式都超出了这个答案的范围,我建议阅读文档.

编辑:

如果您想对数据进行一些后期处理,那就是您将要使用的地方.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回调中执行任何后续处理:

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;
    })