[解決済み】コンポーネントのプロパティが現在の日付時間に依存している場合、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();
}
関連
-
[解決済み] formGroup' は 'form' の既知のプロパティではないため、バインドできません。
-
[解決済み] Angular HTMLバインディング
-
[解決済み] インデックスを属性値とするngFor
-
[解決済み] Angularで変更検知を手動でトリガーする
-
[解決済み] チェックした後に○○の表現が変わっている
-
[解決済み] Angularのルーティングされたコンポーネントにデータを渡すにはどうしたらいいですか?
-
[解決済み】take(1) vs first()
-
[解決済み] Angular 2のパッシブリンク - <a href="">相当
-
[解決済み] @angular/material/index.d.ts' はモジュールではありません。
-
[解決済み] Angular 2でシングルトンサービスを作成するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Angularフレームワーク入門
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] チェックした後に○○の表現が変わっている
-
[解決済み] ngIf」は「div」の既知のプロパティではないため、バインドできない [重複] 。
-
[解決済み] テンプレート駆動型とリアクティブ型の実用的な違いとは?
-
[解決済み] @angular/material/index.d.ts' はモジュールではありません。
-
[解決済み] エクスポートされた2つのクラスを同じ名前でインポートする
-
[解決済み] テンプレート内の *ngIf else if
-
[解決済み] 複数のng-content
-
[解決済み] Angular 2 - モデル変更後、ビューが更新されない