UI Bindings not working reactively with FirebaseListObservable

[oberoivarun]

Angular: ~2.0.0

Firebase:^3.5.0

AngularFire:^2.0.0-beta-5

Other: Windows 10 x64, Node 6.7

How to reproduce these conditions

Steps to set up and reproduce

1. New app using [email protected]. Add angularfire2 and firebase. Setup app in Firbase console and follow guidelines till "Working with Firebase Lists" in AngularFire2 docs.

My Code: app.component.ts

export class AccountsAppComponent implements OnInit {

  items: FirebaseListObservable<Item[]>;

  constructor(
      private af: AngularFire
  ) {
    this.items= af.database.list('/items');
  }

  ngOnInit() {
  }

}

app.component.html

<md-card *ngFor="let item of items | async">
    {{item.name}}
</md-card>

There are no errors reported to console.

Expected behavior

Data changed through another instance of the app, or directly inside firebase database must be reactive onto the UI.

Actual behavior

Data is reactive once in ten times while the browser tab is kept open. Rest of the times, it does not change on it's own. If the browser tab is switched to another (only for a split second) and then switched back again, the change in data is reflected.

Websocket does receive data from Firebase DB. Only data bindings to UI are not working.

On using a test subscription:

items: FirebaseListObservable<Item[]>;

  constructor(
      private af: AngularFire
  ) {
    let items= af.database.list('/items');
    items.subscribe((x) => alert('Reactive Firebase Working!'));
  }

For every change done to the database, an alert does show.

But, again changing the subscription to items.subscribe((x) => this.items = x);, is not reactive.

[davideast]

@oberoivarun What are your security rules set to? If they are restricted to auth != null for .read and .write this would be your problem. If that's not the issue can you please provide a plnkr or repo so I can debug?

[oberoivarun]

@davideast They are set to auth != true for both.

https://github.com/oberoivarun/firebase_reactive_issue_varun

Download this repo. Create a sample app in firebase console and add your credentials and variables in the app.module.ts firebaseconfig variable.

Upload sample data provided, sample_json.json and ng serve.

Then try to change the data in the firebase console and see if it changes in the UI.

Note: Keep the app open while you change the data. Switching the tab will cause rerender and hence you will not notice a problem.

Also, change your database rules to true.

[davideast]

@oberoivarun If your rules are set to auth != true then you won't be able to read the data. You'll need to login or set the rules to true.

[oberoivarun]

@davideast Thanks.. but that's not my problem at all. I can read the data... The data being displayed in my view. When i alter the data in the console, an updated packet reaches my app through the websocket.

The problem is that the view does not update! Everything else is working, just the view isn't updating with the fresh data. My repo shows the problem.

Love your videos on youtube! Thanks again.

[davideast]

@oberoivarun Interesting. This may be a Zone issue. We've been dealing with this a lot lately. I'll check your repo out here in a bit.

[gagrijalva]

Hi @davideast @oberoivarun , I am having the exact same issue. The view is not updating the changes when I use data binding. I could solve this problem by wrapping up my code in the run function from the NgZone class like so:

this.database.object('users/' + this.auth.authState.uid)
            .subscribe(snapshot => {
                this.zone.run(() => {
                    if(snapshot.configInfo !== null && snapshot.configInfo !== undefined) {
                        this.configInfo = snapshot.configInfo; 
                        this.showModal();
                    }
                });
            });

This works well as a temporary solution but I would not like to do this every time I have to use data binding. I hope this issue gets fixed.

[oberoivarun]

@gagrijalva You solution works, but throws as error.

I used it like this:

let items = af.database.list('/items');
    items.subscribe((x): void => {
      this.zone.run((): void => {
        this.items = x; //This line is referenced in the error.
      });
    });

Type 'any[]' is not assignable to type 'FirebaseListObservable<Item[]>'. Property '_ref' is missing in type 'any[]'.

I also tried:

af.database.list('/items').subscribe(x => {
      this.zone.run(() => {
        this.items.push(x);
      });
    });

This throws:

items.service.ts:19 Uncaught TypeError: Cannot read property 'push' of undefined(…)

Any idea how to remove this?

[gagrijalva]

@oberoivarun, from what I can see you are trying to get a list of objects from your database, and assign them to the variable "items". What I would do to solve the problem is to declare the variable "items" as "any" type and then just assign the result (x) to the variable "items", and wrap the assignment declaration inside the "run" function from the ngZone class. I will leave the code implementation below:

    items: any; // Declare this variable above in your code

    af.database.list('/items').subscribe((x): void => {
      this.zone.run((): void => {
        this.items = x;  //Make sure you are making reference to the same variable of items declared above in your code
      });
    });

[oberoivarun]

@gagrijalva I have.. still get the same error.

[gagrijalva]

@oberoivarun can you show me the full implementation of your code?

[oberoivarun]

@gagrijalva Sorry... i was doing any[]. Using any removed the error. Thanks!

[gagrijalva]

Your welcome!

[jeffbcross]

Closing as a duplicate of #637, which I'm working on fixing right now