0

I have a userData$ observable which basically connects to firebase. On this user object, is a bunch of optional properties.

I am using Ionic2 and I create the observable during ionViewDidLoad which is described here

This code

<h1 *ngIf="(userData$ | async)?.name">{{(userData$ | async)?.name}}</h1>

Causes me to have the following error

FIREBASE WARNING: Exception was thrown by user callback. Error: Expression has changed after it was checked. Previous value: 'CD_INIT_VALUE'. Current value: ''. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

And in particular the first line on the stack trace is ExpressionChangedAfterItHasBeenCheckedError

What am I doing wrong here with that async template? If I delete *ngIf it works. If I change ...">Hello World"</h1> it works. But I can't do both here and not really sure why. I think that that ngif runs but the interpolation is missed.

Does anyone know why this happens or what the correct method should be?

Thanks!

Clark
  • 2,598
  • 3
  • 27
  • 41
  • At what point in your component life cycle do you initialize the observable `userData$` ? – Igor Feb 08 '17 at 18:10
  • I updated my answer. I am using `ionViewDidLoad` as I am using Ionic2, but I have tried doing crazy things, like in the constructor, or after a 10 second timeout. – Clark Feb 08 '17 at 18:18
  • angular2s dev mode executes each digest cycle 2x to compare results and if they differ you get this exception/error. Generally you should try to load data or make the data loading call in `ngOnInit` when you implement `OnInit`. If you do it in the constructor or at an arbitrary point in time you could see this err in dev. mode. – Igor Feb 08 '17 at 18:21

0 Answers0