Angularfire: Angularfire2 updating an existing value

Created on 30 Oct 2016  路  2Comments  路  Source: angular/angularfire

Version info

Angular: 2.0.2

Firebase: 3

AngularFire: 2.0.0-beta 5

Other (e.g. Ionic/Cordova, Node, browser, operating system): Windows

How to reproduce these conditions

Steps to set up and reproduce

I've been trying to add a value to existing value using the following code:

this.af.database.object('sections/max_cap').subscribe((data) => {
      console.log("Setting..");
      let newData = data.$value + table.max_seats;
      this.af.database.object('section/max_cap').set(newData)
      .then(_ => console.log("Updated"))
      .catch(err => console.log(err, "Failed"));
    });

Sample data and security rules

Unreleated

Debug output

* Errors in the JavaScript console *

Thousands of:
"Settings.."
"Updated.."
and a "maximum stack call exceed"

Update the object value

Thousands of updates, which totally flood my firebase database.

Not sure if https://github.com/angular/angularfire2/pull/648 releated or fixes it, if it does, please close this issue.

Most helpful comment

You are creating an infinite loop in your code. You are subscribing to get notified each time data changes, and are changing the data each time it's been changed.

If you only want the subscribe callback to get called once, you'll need to use the rxjs take operator.

import { take } from 'rxjs/add/operator/take';

this.af.database.object('sections/max_cap')
.take(1)
.subscribe((data) => {
      console.log("Setting..");
      let newData = data.$value + table.max_seats;
      this.af.database.object('section/max_cap').set(newData)
      .then(_ => console.log("Updated"))
      .catch(err => console.log(err, "Failed"));
    });

This tells RxJS to complete the observable once 1 value is emitted.

All 2 comments

You are creating an infinite loop in your code. You are subscribing to get notified each time data changes, and are changing the data each time it's been changed.

If you only want the subscribe callback to get called once, you'll need to use the rxjs take operator.

import { take } from 'rxjs/add/operator/take';

this.af.database.object('sections/max_cap')
.take(1)
.subscribe((data) => {
      console.log("Setting..");
      let newData = data.$value + table.max_seats;
      this.af.database.object('section/max_cap').set(newData)
      .then(_ => console.log("Updated"))
      .catch(err => console.log(err, "Failed"));
    });

This tells RxJS to complete the observable once 1 value is emitted.

As had this exacte problem and this page came up on google and was the only good solution:
Update the RXJS Lib changed, it is:

import { take } from 'rxjs/operators';

this.af.database.object('sections/max_cap')
.pipe(take(1))
.subscribe((data) => {
      console.log("Setting..");
      let newData = data.$value + table.max_seats;
      this.af.database.object('section/max_cap').set(newData)
      .then(_ => console.log("Updated"))
      .catch(err => console.log(err, "Failed"));
    });

now

Was this page helpful?
0 / 5 - 0 ratings