从 Firebase 列表转换对象的正确方法？答案

【问题标题】：Correct way to transform Object from Firebase list?从 Firebase 列表转换对象的正确方法？
【发布时间】：2017-04-25 05:48:50
【问题描述】：

从可观察的 firebase 列表转换对象的正确方法是什么？

以下代码有一些副作用，并在我的模板中创建重复的结果。第一次加载正确，但第二次访问该页面后，显示重复的结果。

loadAccountUsers() {
        return this.af.database.list(`accounts/${this.authService.accountUID}/accountUsers`)
            .flatMap(list => list)
            .map((data: any) => {
                let role: string = (data.accountLevel === 10 ? 'Administrator' : 'User');
                return {
                    firstName: data.firstName,
                    lastName: data.lastName,
                    emailAddress: data.emailAddress,
                    role: role
                };
            })
            .scan((arr, val) => arr.concat([val]), [])
    }

当我不转换对象时，一切都很好

   loadAccountUsers() {
      return this.af.database.list(`accounts/${this.authService.accountUID}/accountUsers`)
}

【问题讨论】：

标签： javascript angular firebase firebase-realtime-database rxjs

【解决方案1】：

flatMap 将列表中的每个元素发送到可观察流中。当数据库更改并发出另一个列表时，它的元素也会被发出。但是，scan 操作将发出的元素组合成一个数组 - 因此是重复的。

您可以改用 RxJS 的 map 运算符和 Array.prototype.map 方法来解决问题：

loadAccountUsers() {
    return this.af.database.list(`accounts/${this.authService.accountUID}/accountUsers`)
        .map((list) => list.map((data) => {
            let role: string = (data.accountLevel === 10 ? 'Administrator' : 'User');
            return {
                firstName: data.firstName,
                lastName: data.lastName,
                emailAddress: data.emailAddress,
                role: role
            };
        }));
}

【讨论】：