0

I'm implementing the following *ngIf. I know that I shouldn't technically call a function from within an *ngIf but it's needed for a hack:

<div *ngIf="!ddlAuthorsSelect2Bound && wireUpSelect2()"></div>

Anyway, the following implementation works fine:

<div *ngIf="wireUpSelect2()"></div>

However, for some reason this *ngIf is getting called multiple times. So I added the additional member variable check in the first code example to prevent the additional function call. This works as expected as well but ng2 writes the following error to the console: 

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

Do you know of a way that I can suppress this error?

user8334943
  • 1,467
  • 3
  • 11
  • 21
  • I am not sure if I understood, ddlAuthorsSelect2Bound is a 'switch' to detect when wireUpSelect2() is called or when ngIf is effectif? – Vega Aug 09 '17 at 20:01
  • hi vega - sorry I wasn't clear about that. ddlAuthorsSelect2Bound has a default value of false but gets set to true after wireUpSelect2() is called. since the *ngIf expression gets implemented multiple times, wireUpSelect2() has a guard clause which skips the wireup logic if ddlAuthorsSelect2Bound has been set to true – user8334943 Aug 09 '17 at 20:04
  • How about you check ddlAuthorsSelect2Bound value inside wireUpSelect2()? Like if(ddlAuthorsSelect2Bound) return. Kind of 'half-workaround'. – Vega Aug 09 '17 at 20:07
  • @vega - yep I am checking that inside of the method but I was hoping to avoid the method call altogther with a simple variable check. but I think you're right, just checking it within the method will be the cleanest workaround. thanks! – user8334943 Aug 09 '17 at 20:19

2 Answers2

1

The quick and dirty workaround is to put this in your component: public ngDoCheck(): void { this.cdRef.detectChanges(); }.

Make sure you import: import {... , ChangeDetectorRef} from '@angular/core';

And include it in the constructor: constructor(..., private cdRef:ChangeDetectorRef) {...}

This is a common problem with @angular 4.2.x. Regardless of whether or not it's best practice, the workaround will be much more burdensome than adding one lifecycle check. If I'm not mistaken, you should not have to do this for 4.3.x.

Michael
  • 368
  • 2
  • 8
0

Firstly avoid using functions in *ngIf wireUpSelect2()

The reason for your err Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. is template parsing happens in the order. if boolean !ddlAuthorsSelect2Bound is changed in the subsequent lines in the html and you are calling this boolean in the top of html this error comes.

Sunil Kumar
  • 759
  • 7
  • 17
  • thanks I know the reason but was asking for a workaround – user8334943 Aug 09 '17 at 19:38
  • hi if you could share the html and ts file i cad find some workaround. general sense work around for this would be use different boolean variables and change the value of one boolean variable with the help of other boolean variables coming in the subsequent order. – Sunil Kumar Aug 14 '17 at 08:39