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>

Answer 1

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

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

Answer 2

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.