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

Question

I am getting a async error when trying to get a users profile data from firebase and then displaying it on the home page. I tried removing the async in the home.html this gets rid of the error but no data is being shown.

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

home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';
import { Profile } from './../../models/profile';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  profileData: FirebaseObjectObservable<Profile>

  constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase,
    private toast: ToastController, public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewWillLoad() {
    this.afAuth.authState.take(1).subscribe(data => {
      if (data && data.email && data.uid) {
        this.profileData = this.afDatabase.object(`profile/${data.uid}`)
      }
      else {
        this.navCtrl.setRoot('LoginPage');
      }
    })
  }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Username: {{(profileData | async)?.username}} </p>
  <p>Date of Birth: {{(profileData | async)?.birthdate}} </p>
</ion-content>

Possible duplicate of Ionic and Firebase - InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' — Sébastien
– Sébastien, Commented Jan 12, 2018 at 20:38

vince · Accepted Answer · 2018-01-12 20:51:27Z

1

FirebaseObjectObservable<Profile> is not a type that the async pipe will recogonize.

Here is a link to the source code for AsyncPipe: https://github.com/angular/angular/blob/5.2.0/packages/common/src/pipes/async_pipe.ts#L43-L145.

Note around line 119 the following function:

private _selectStrategy(obj:Observable<any>|Promise<any>|EventEmitter<any>): any {
    if (ɵisPromise(obj)) {
      return _promiseStrategy;
    }

    if (ɵisObservable(obj)) {
      return _observableStrategy;
    }

    throw invalidPipeArgumentError(AsyncPipe, obj);
  }

Since profileData is not a Promise or an Observable, it is throwing the invalidPipeArgumentError. You will need to convert your data into a standard Observable or a Promise in order to use the async pipe.

You can do this using the .valueChanges() method (which returns an Observable) and changing the type of profileData to Observable.

answered Jan 12, 2018 at 20:51

vince

8,3463 gold badges39 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yuyang He Over a year ago

please help me check. thank you.stackoverflow.com/questions/48515158/…

Jar6 · Accepted Answer · 2018-01-12 20:48:48Z

1

this.profileData = this.afDatabase.object(`profile/${data.uid}`).valueChanges();

You have to add .vauleChanges() this should clear the error and show the data.

answered Jan 12, 2018 at 20:48

Jar6

735 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related