abreneliere abreneliere - 2 months ago 17
TypeScript Question

How to manage Angular2 "expression has changed after it was checked" exception when a component property depends on current datetime

My component has styles that depend on current datetime. In my component I've got the following function.

private fontColor( dto : Dto ) : string {

// date d'exécution du dto
let dtoDate : Date = new Date( dto.LastExecution );

(...)

let color = "hsl( " + hue + ", 80%, " + (maxLigness - lightnessAmp) + "%)";

return color;
}


lightnessAmp
is calculated from the current datetime. The color changes if
dtoDate
is in the last 24 hours.

The exact error is the following:

Expression has changed after it was checked. Previous value:
'hsl( 123, 80%, 49%)'. Current value: 'hsl( 123, 80%, 48%)'


I know the exception appear in development mode only at the moment the value is checked. If the checked value is different of the updated value, the exception is thrown.

So I tried to update the current datetime at each lifecycle in the following hook method to prevent the exception:

ngAfterViewChecked()
{
console.log( "! changement de la date du composant !" );
this.dateNow = new Date();
}


...but without success.

Answer

Run change detection explicitly after the change:

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked()
{
  console.log( "! changement de la date du composant !" );
  this.dateNow = new Date();
  this.cdRef.detectChanges();
}
Comments