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

Ionic Framework ionic-v3
1

Hi guys, i have error on my ionic project which is the piping. it cannot call back the data of the user that has just updated to profile page. please help. thanks :slight_smile:

profile.html

<p>Name: {{(profileData | async)?.name}}</p>
<p>Matric No.: {{(profileData | async)?.matric}}</p>
<p>Course: {{(profileData | async)?.course}}</p>
<p>Gender: {{(profileData | async)?.gender}}</p>

profile.ts

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

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

  profileData: AngularFireObject<Profile>

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

  ionViewWillLoad() {
    this.afAuth.authState.subscribe(data => {
      if (data && data.email && data.uid) {
          this.profileData = this.afDatabase.object(`profile/${data.uid}`);
        }
      });
  }

asdfsdf
asdfsdf.JPG428×551 40.9 KB

I want to show the details of a user that has logged in.
rrrr

2

Have you already logged your object via console? Seems as if you try to provide nested objects to async pipe

3

yes i already did that… it seems that the pipes do not want to call back the profile details of specific user. only the profile tab has error, other tabs works fine.

4

Angular pipes are disconnected from standard change detection, for performance reasons. There are two types of pipes - pure and impure pipes - and they detect changes differently. The async pipe is the most famous example of a impure pipe.

I suggest you read up on both of these, because you’re using pipes in a nonstandard way, so you need to know what you can and can’t do. In this specific situation, the impure pipe’s change detection will not fire unless it views a change in object reference location that takes place inside the Angular zone. You make potential reference changes invisible, because you nest them inside a subscribe, which is outside the Angualr zone.

You are nesting subscribes. There is a subscribe inside the async pipe, and there is a subscribe to your authstate. So you need to remove the nesting.

The simplest way to do this is to create a provider that handles the data, by chaining requests, instead of nesting them. The provider then emits a stream of values. Your page listens to the provider and displays the data it hears from the provider.

5

actually, i followed all the steps shown in this youtube video --> https://youtu.be/uESqBwFVf1Q
which is from Paul Halliday.