angular - 当组件属性取决于当前日期时间时如何管理 Angular2 "expression has changed after it was checked"异常

Question

我的组件具有依赖于当前日期时间的样式。在我的组件中，我有以下功能。

  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 是根据当前日期时间计算的。如果 dtoDate 在过去 24 小时内，颜色会发生变化。

具体错误如下:

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

我知道只有在检查值时才会在开发模式下出现异常。如果检查值与更新值不同，则抛出异常。

所以我尝试在以下钩子(Hook)方法中更新每个生命周期的当前日期时间以防止异常:

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

...但没有成功。

Answer 1

在更改后显式运行更改检测:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef:ChangeDetectorRef) {}

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