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 
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}`);
}
});
}
I want to show the details of a user that has logged in.
Have you already logged your object via console? Seems as if you try to provide nested objects to async pipe
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.
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.
actually, i followed all the steps shown in this youtube video --> https://youtu.be/uESqBwFVf1Q
which is from Paul Halliday.
