1. ホーム
  2. angular

[解決済み】コンポーネントのプロパティが現在の日付時間に依存している場合、Angular2の「expression has changed after it was checked」例外を管理する方法

2022-04-14 13:56:12

質問

私のコンポーネントは、現在のdatetimeに依存するスタイルを持っています。私のコンポーネントでは、次の関数を持っています。

  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 は、現在のdatetimeから計算されます。色が変わるのは dtoDate が過去24時間以内であることを示します。

正確には以下のようなエラーです。

チェックした後に式が変更されました。以前の値:'hsl( 123, 80%, 49%)'. 現在の値: 'hsl( 123, 80%, 48%)'.

開発モードで例外が発生するのは、値がチェックされた瞬間だけですよね。チェックした値が更新された値と異なる場合、例外がスローされます。

そこで、以下のフックメソッドで、ライフサイクルごとに現在のdatetimeを更新するようにして、例外が発生しないようにしました。

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

...が、成功せず。

解決方法は?

変更後に明示的に変更検知を実行する。

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();
}