CODEWITHSUNDEEP
angularfirebaseangularfire2
Christian Bohli
Christian Bohli

Reputation: 341

Angularfire2 snapshotchanges subscription pipe problem

I'm using @angular/fire, and I had just snapshotChanges() for the database, now I tried to subscribe to it to stay always updated.

    return this.db.list<Plan>(this.BASE_PATH).snapshotChanges().subscribe(
      item => {
        return item.map(a => {
            var p = new Plan;
            p.key = a.payload.key;
            p.name = a.payload.child(this.NAME).val();
            p.descripton = a.payload.child(this.DESCRIPTON).val();
            p.isPublic = a.payload.child(this.ISPUBLIC).val() == 'false' ? false : true;

            return p;
        })
      }
    );

but this does end up in problems with the async pipe and gives me an error:

ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
    at invalidPipeArgumentError (common.js:3981)
    at

the error is actually longer but just to show you.

Maybe you have any ideas

Upvotes: 0

Views: 448

Answers (2)

Poul Kruijt
Poul Kruijt

Reputation: 71891

Instead of subscribe you should use the .pipe method and the map operator. As mentioned before, you cannot use the async template pipe on a subscription:

return this.db.list<Plan>(this.BASE_PATH).snapshotChanges().pipe(
  map((items) => items.map(a => {
    const p = new Plan;
    p.key = a.payload.key;
    p.name = a.payload.child(this.NAME).val();
    p.descripton = a.payload.child(this.DESCRIPTON).val();
    p.isPublic = a.payload.child(this.ISPUBLIC).val() == 'false' ? false : true;

    return p;
  }))
);

Upvotes: 1

Jay
Jay

Reputation: 406

Have you used asyncpipe in your template? if so you wouldn't need to subscribe to the snapshotChanges() on your ts class. asyncPipe will do that magic

Upvotes: 1

Related Questions