InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Question

Declared in service like this:

public currentDBUserBS$: any;

constructor(private afDb: AngularFireDatabase){}

fetchUser(uid){
  this.afDb.object(`users/${uid}`).valueChanges().subscribe((dUser) => {
    if (dUser) {
      this.currentDBUserBS$ = dUser;
    }
  });
}

Now trying to use in template

template: `<li *ngIf="(authService.currentDBUserBS$ | async)?.role=='admin'"> Something </li>`

The error stack:

ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
    at invalidPipeArgumentError (common.js:4219)
    at AsyncPipe._selectStrategy (common.js:5630)
    at AsyncPipe._subscribe (common.js:5612)
    at AsyncPipe.transform (common.js:5586)
    at Object.View_AppNavigatorComponent_0._co [as updateDirectives] (AppNavigatorComponent.html:40)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339)
    at checkAndUpdateView (core.js:13508)
    at callViewAction (core.js:13858)
    at execComponentViewsAction (core.js:13790)
    at checkAndUpdateView (core.js:13514)

https://stackoverflow.com/a/44868715/3055401 – Michael Doye Nov 28 '17 at 10:33 — Michael Doye, Nov 28 '17 at 10:33

score 24 · Accepted Answer · answered Nov 28 '17 at 10:37

24

You are giving currentDBUserBS$ the object you are fetching from Firebase and not the Observable. If you want to do it this way, you have to remove the | async in your template.

However, you could do the following :

fetchUser(uid){
  this.currentDBUserBS$ = this.afDb.object(`users/${uid}`).valueChanges();
}

.valueChanges() gives you an observable and will update automatically when a new value is emitted or an existing value is modified.

answered Nov 28 '17 at 10:37

tom

745
5
20

ok got it, but is there any difference between the two approaches ? In both cases I would get asynchronus update to my template from db right ? – ishandutta2007 Nov 28 '17 at 10:42
@ishandutta2007 the results will almost be the same. The `| async` is used to subscribe to your Observable / BehaviorSubject / Subject in your template. When a new value is emitted, Angular will be notified of the changes. With a `.subscribe`, it will be checked every change detection cycle. – tom Nov 28 '17 at 10:46

score 4 · Answer 2 · edited Apr 28 '19 at 20:37

4

You must add .valueChanges(); after subscribing operation. It is required as shown below:

 this.courses$=db.list('/courses').valueChanges();

edited Apr 28 '19 at 20:37

pzaenger

11,381
3
45
46

answered Apr 28 '19 at 20:32

amr hamdy

41
3

score 2 · Answer 3 · answered Nov 28 '17 at 10:34

2

You're trying to pass array to async pipe instead of Observable. Just remove the async pipe or assign observable to currentDBUserBS$.

answered Nov 28 '17 at 10:34

Mateusz Witkowski

1,646
10
24

db.object() return object db.list() returns array – ishandutta2007 Nov 28 '17 at 10:36

InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

3 Answers3