question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FirebaseListObservable emits duplicate values for first insert

See original GitHub issue

If I subscribe to an empty list, and then add a new value to that list it looks like that value is getting emitted twice. For example if I do:

let observable = this._angularFire.list('my_path', {preserveSnapshot: true});
observable.subscribe ((l) => {
  console.log('length', l.length);
});
setTimeout(() => {
  observable.add({text: 'new'});
}, 1);

If ‘my_path’ is initially empty this will output: length 1 length 2

The 2 is erroneous and contains a duplicate entry.

It doesn’t look like this problem occurs if ‘my_path’ is not initially empty.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:23 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
kazkiscommented, Apr 15, 2016

Hi @davideast, I’m facing the same problem described by doovers. Here’s what I’m doing (it can easily be my fault since I’m still new to this):

test.component.ts :

import {Component} from 'angular2/core';
import {AngularFire, FirebaseListObservable} from 'angularfire2';

@Component({
    selector: 'test',
    templateUrl: 'app/test.component.html'
})

export class TestComponent{
    private _testList: FirebaseListObservable<any[]>;

    constructor(private _af: AngularFire) {
        this._testList = _af.database.list('/test');
    }

    addNew(item: any){
        this._testList.push(item);
    }

    updateMe(item: any){
        this._testList.update(item, { value: 5});
    }

    removeMe(item: any){
        this._testList.remove(item);
    }
}

test.component.html :

<ul *ngFor="#item of _testList | async">
  <li class="text">
    <p>Value: {{ item.value }}</p>
    <button type="button" (click)="updateMe(item)">Update me!</button>
    <button type="button" (click)="removeMe(item)">Remove me!</button>
  </li>
</ul>

<form #form="ngForm" (ngSubmit)="addNew(form.value)" novalidate>
  <label>Value:</label>
  <input type="text" ngControl="value" required>
  <button type="submit" [disabled]="!form.form.valid">Add</button>
</form>

If you try to update the first item of the list, it will show both the old value and the new updated value (5), and if there was only one item, every new item inserted from now on is duplicated; if you update every other item, it seems to work fine. The server always shows the correct results.

0reactions
davideastcommented, Jun 7, 2017

@zaki-arain If you’re running into this issue then please create a plnkr replicating it and then open a new issue. We’ll be happy to debug 😃

Note: The above goes for anyone who runs into this issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

FirebaseListObservable emits duplicate values for first insert #73
If I subscribe to an empty list, and then add a new value to that list it looks like that value is getting...
Read more >
Is it possible to reverse a Firebase list? - Stack Overflow
So don't mark this as a duplicate. I'm using AngularFire with Angular 2 and Typescript. I'm using FirebaseListObservable to pull a list of...
Read more >
angular/angularfire2 - Gitter
Hi, how to get token when I login with email password in ngFire2? We can use uid and email only now.
Read more >
@angular/fire | Yarn - Package Manager
The official Angular library for Firebase. ng add @angular/fire. AngularFire smooths over the rough edges an Angular developer might encounter when implementing ...
Read more >
A new duplicate sign-out HTTP request is sent every time the ...
Coding example for the question A new duplicate sign-out HTTP request is sent every time the user logs out: Angular, RxJs-rx.js.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found