【问题标题】:ValueChanges & SnapshotChanges, don't get the full lists anymore with Firebase AngularFire2ValueChanges 和 SnapshotChanges,不再使用 Firebase AngularFire2 获取完整列表
【发布时间】:2018-04-17 07:52:05
【问题描述】:

最近 AngularFire 如何处理对象/列表以及在整个应用程序中引用对象的方式发生了一些变化,我们遇到了一些严重的问题。

主要是旧的AngularFireObject & AngularFireList 与新的相比如何工作。我们的应用高度依赖于$key 值,因为我们进行了广泛的非规范化(如推荐的那样)。

现在文档使用地图示例来获取 $key 值,但这并不相同,甚至 valueChanges() 似乎也不一样。

我不完全确定我们现在应该如何处理这些更改。

考虑:

老路

/* /items/
    a/{name: 'Dennis', city: 'Dallas'}
    b/{name: 'Katie', city: 'Austin'}
    c/{name: 'Will', city: 'Chicago'}
*/
let myAfList = this.af.list('path/to/items');
let itemsFirst, itemsSecond, itemsThird;

myAfList.subscribe(items => itemsFirst = items);

setTimeout(_ => myAfList.subscribe(items => itemsSecond = items), 1000);
setTimeout(_ => myAfList.subscribe(items => itemsThird = items), 2000);

/* Results for all three item arrays
    itemsFirst: [
        {name: 'Dennis', city: 'Dallas', $key: 'a'},
        {name: 'Katie', city: 'Austin', $key: 'b'}
        {name: 'Will', city: 'Chicago', $key: 'c'}
    ];
*/

所有三个订阅都正确获取完整的项目数组并设置为监听未来的变化

值变化的新方式:

let myAfList = this.af.list('path/to/items').valueChanges();
let itemsFirst, itemsSecond, itemsThird;

myAfList.subscribe(items => itemsFirst = items);

setTimeout(_ => myAfList.subscribe(items => itemsSecond = items), 1000);
setTimeout(_ => myAfList.subscribe(items => itemsThird = items), 2000);

/* Results for ONLY itemsFirst
    itemsFirst: [
        {name: 'Dennis', city: 'Dallas'},
        {name: 'Katie', city: 'Austin'}
        {name: 'Will', city: 'Chicago'}
    ];
*/

ItemsFirst 作为第一个订阅正确获取项目。其他两项一无所获,但所有三项都订阅了未来的更改。没有一个有键值。

$key 的映射

let myAfList = this.af.list('path/to/items').snapshotChanges()
            .map(actions => {
                return actions.map(action => {
                    const $key = action.payload.key;
                    const data = { $key, ...action.payload.val() };
                    return data;
                });
            });
let itemsFirst, itemsSecond, itemsThird;

myAfList.subscribe(items => itemsFirst = items);

setTimeout(_ => myAfList.subscribe(items => itemsSecond = items), 1000);
setTimeout(_ => myAfList.subscribe(items => itemsThird = items), 2000);

/* Results for ONLY itemsFirst
    itemsFirst: [
        {name: 'Dennis', city: 'Dallas', $key: a},
        {name: 'Katie', city: 'Austin', $key: b}
        {name: 'Will', city: 'Chicago', $key: c}
    ];
*/

$key 现在在列表中,但同样只在第一个项目列表中...

所以快速观察是现在的对象是围绕核心 firebase 引用的非常简单的包装器,并且 valueChanges() 需要移动到子端,例如:

let myAfList = this.af.list('path/to/items');
myAfList.valueChanges().subscribe(items => itemsFirst = items);

这行得通!耶!但是钥匙呢?好吧,我必须一遍又一遍地写出地图功能。或者创建我自己的函数,但它不在对象原型上,所以我必须将它添加到我使用它的每个文件中......

我错过了什么?获取 $key 的正确方法是什么,订阅是否始终获取完整值?

有没有更好的方法来做到这一点?

【问题讨论】:

  • 那么你最终做了什么?我现在也被困在这里..
  • 我确实认为这里的市长问题是,您在超时和第一次订阅之间没有任何异步机制。

标签: angularjs firebase rxjs angularfire2 angular2-observables


【解决方案1】:

您可能想探索这种可能性:

// Generate a reference to a new location and add some data using push()
var newPostRef = postsRef.push();

// Get the unique key generated by push()
var postId = newPostRef.key;

source

【讨论】:

  • update 与 push 怎么样,我们如何才能简单地获取密钥?
猜你喜欢
  • 2018-05-27
  • 2018-06-29
  • 2018-10-27
  • 2018-04-30
  • 2018-11-03
  • 2019-03-06
  • 2017-01-18
  • 1970-01-01
  • 2019-11-07
相关资源
最近更新 更多