当组件属性依赖于当前日期时间时，如何管理Angular2“expression has changed after it was checked”异常

我的组件具有依赖于当前日期时间的样式。在我的组件中，我有如下函数。

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

.．.但是没有成功。

当前回答

一个小工作周围我用过很多次

Promise.resolve(data).then(() => { console.log (" !更改组件日期!”); this。dateNow = new Date(); this.cdRef.detectChanges (); });

2019-01-29 09:05:20

其他回答

我认为你能想到的最好和最干净的解决方案是:

@Component( {
  selector: 'app-my-component',
  template: `<p>{{ myData?.anyfield }}</p>`,
  styles: [ '' ]
} )
export class MyComponent implements OnInit {
  private myData;

  constructor( private myService: MyService ) { }

  ngOnInit( ) {
    /* 
      async .. await 
      clears the ExpressionChangedAfterItHasBeenCheckedError exception.
    */
    this.myService.myObservable.subscribe(
      async (data) => { this.myData = await data }
    );
  }
}

用Angular 5.2.9测试过

2018-04-29 18:02:24

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

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

2016-09-30 08:32:53

将代码从ngAfterViewInit移到ngAfterContentInit。

视图在内容之后被初始化，因此ngAfterViewInit()在ngAfterContentInit()之后被调用

2021-02-06 13:37:31

使用默认表单值可避免此错误。

而不是使用在ngAfterViewInit()中应用detectChanges()的接受答案(这也解决了我的情况下的错误)，我决定为动态所需的表单字段保存一个默认值，这样当表单稍后更新时，如果用户决定更改表单上的选项，将触发新的必需字段(并导致提交按钮被禁用)，它的有效性不会改变。

这在我的组件中节省了一小部分代码，在我的案例中，错误完全避免了。

2020-04-06 20:12:55

一个小工作周围我用过很多次

Promise.resolve(data).then(() => { console.log (" !更改组件日期!”); this。dateNow = new Date(); this.cdRef.detectChanges (); });

2019-01-29 09:05:20

当组件属性依赖于当前日期时间时，如何管理Angular2“expression has changed after it was checked”异常

推荐文章

最新文章

标签