使用 AngularFire2 从 Firebase 中的多个键中检索值

Question

我刚刚开始使用 angularFire2。我有一些 Firebase 数据的结构如下：

{
    "user-friends": {
        "-userkey1": {
            "-userkey2": true,
            "-userkey3": true
        }
    },

    "users": {
        "-userkey1": {
            "uid": "id1",
            "uname": "Jim Yu"
        },
        "-userkey2": {
            "uid": "id2",
            "uname": "Bob Smith"
        },
        "-userkey3": {
            "uid": "id3",
            "uname": "Jane Doe"
        }
    }
}

到目前为止，我可以在user-friends 节点中检索-userkey1 的数据，返回

   "-userkey1": {
        "-userkey2": true,
        "-userkey3": true
    }

然后我希望能够获取每个键的uname，并将其存储在将绑定到视图的变量中。

我有点不确定如何专门使用 angularFire2 来完成最后一步。或者是否有 angular/firebase 特定的方法/帮助方法来解决这个问题。

到目前为止，这就是我所拥有的，但是一旦我遍历每个键并尝试将用户名推送到数组中，控制台就会记录第一个键 uname，然后尖叫cannot read property 'push' of undefined

userFriends(userkey: string){
    console.log("userKey=" + userkey)
    var getUsrFriends = this.afDB.list("https://myfirebaseurl.com/user-friends/" + userkey
    ).subscribe( data => {
        data.forEach(friendKey => {
            console.log(friendKey.$key) //my instinct tells me looping through the keys and storing in an array is not a optimal solution
            var getUserInfo = this.afDB.object("https:/myfirebaseurl.com/users/" + friendKey.$key, {
            }).subscribe( u => {
                console.log(u.uname)
                this.friendsList.push(u.uname) // <- undefined error 
            })    
        });       
    })   
}

<ng-container  *ngIf="showView == 'friend'">
    <ion-list *ngFor="let friend of friendsList">
        <h3>{{friend}}</h3>
    </ion-list>
</ng-container>

编辑：未定义的错误实际上是由于未正确初始化 friendsList 数组引起的。

export class UserPage {
  friendsList: string[] = []
 // constructor, etc
}

Answer 1

Firebase 真的很快，所以打多个电话也不错。

使用您当前的数据结构，此代码将起作用：

// Outside firebase calls
let scope = this;

...
var getUserInfo = this.afDB.object("https:/myfirebaseurl.com/users/" + friendKey.$key, {}).take(1).subscribe( u => {
    console.log(u.uname)
    scope.friendsList.push(u.uname) // <- undefined error 
})
...

this，一旦进入 Firebase Promise 就会被该 Promise 保留，这意味着与全局组件变量的常规保留 this 不同。

另外，在订阅前使用take(1)，因为您只想检索这些值一次而不是继续收听。

---

另一种方法是重组您的数据库以进行更快的查询，以换取更多的数据存储。您可以存储整个user，而不是将用户引用存储在user-friends 中。但我会建议第一种选择。