Angular2 fire 监听节点变化抛出错误

Question

下面的代码可以正常工作，它应该监听节点中的变化并执行一个函数，但现在出现错误：

ncaught TypeError: Object(...) is not a function
at SwitchMapSubscriber.eval [as project] (changes.js:7)

所以，在我的 angular2 组件中我有：

private subscriptions = new Subscription();

registered: AngularFireList<any>;
constructor(private _af: AngularFireDatabase){
     this.registered = _af.list('/registered');
 }

ngOnInit() {
    this.subscriptions.add(
        this.registered.valueChanges().subscribe(
            res => {
                console.log("the value has changed");
            }
        )
    );
}

那么我哪里出错了，上面的错误指向：

angular2fire/database/list/changes

我需要我的代码做的是在 firebase 节点发生变化时监听并记录到控制台

订阅还定义为：

    private subscriptions = new Subscription();

将其添加到订阅中，然后我可以使用 onDestroy 生命周期并防止内存泄漏，如下所示

    ngOnDestroy() {
      this.subscriptions.unsubscribe();
    }

Answer 1

您似乎没有订阅列表，但 subscriptions 中只存储了一个订阅。尝试将其更改为这样的数组：

private subscriptions: Subscription[] = [];

registered: AngularFireList<any>;
constructor(private _af: AngularFireDatabase){
     this.registered = _af.list('/registered');
 }

ngOnInit() {
    this.subscriptions.push(
        this.registered.valueChanges().subscribe(
            res => {
                console.log("the value has changed");
            }
        )
    );
}

ngOnDestroy() {
   this.subscriptions.forEach((s) => s.unsubscribe());
}

使用 Subscription.add 您实际上是将 TeardownLogic 添加到现有订阅。这可以在您需要进行额外清理时使用。

如果您知道您将只有一个订阅，请使用赋值运算符 = 而不是 add() 函数，如下所示：

private subscription: Subscription;

registered: AngularFireList<any>;
constructor(private _af: AngularFireDatabase){
     this.registered = _af.list('/registered');
 }

ngOnInit() {
    this.subscription =
        this.registered.valueChanges().subscribe(
            res => {
                console.log("the value has changed");
            }
     );
}

ngOnDestroy() {
   this.subscription.unsubscribe();
}

Answer 2

这是最近很流行的问题。请将 rxjs 5 升级到版本 6。

发生这种情况是由于 AngularFire 中的一些重大更改。升级后，该功能应按预期执行。

升级使用：npm install rxjs@6 rxjs-compat@6 --save（推荐）

或回滚（不推荐）使用：

npm uninstall angularfire2
npm install angularfire2@5.0.0-rc.4
npm uninstall firebase
npm install firebase@4.8.0

请参阅 rxjs 官方 migration doc 了解操作方法以及有关 5 和 6 之间变化的更多详细信息。

Angular2 fire 监听节点变化抛出错误

Angular2 fire listen to node changes throws an error

javascript

firebase

firebase-realtime-database

angularfire2