当组件属性依赖于当前日期时间时，如何管理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();
  }

.．.但是没有成功。

当前回答

我得到了这个错误，因为我声明了一个变量使用ngAfterViewInit改变了它的值

export class SomeComponent {

    header: string;

}

来修复我从

ngAfterViewInit() { 

    // change variable value here...
}

ngAfterContentInit() {

    // change variable value here...
}

2020-05-04 23:30:29

其他回答

你可以使用µsetTimeout()在javascript事件循环的下一个宏任务队列中运行属性的设置。但是在这种情况下，使用detectChanges()就足够了。出现这种错误的原因有很多:

本文解释了产生此错误的所有原因以及此错误的所有解决方案:https://blog.simplified.courses/angular-expression-changed-after-it-has-been-checked-error/

2022-12-21 10:42:09

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

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

2019-01-29 09:05:20

我得到了这个错误，因为我声明了一个变量使用ngAfterViewInit改变了它的值

export class SomeComponent {

    header: string;

}

来修复我从

ngAfterViewInit() { 

    // change variable value here...
}

ngAfterContentInit() {

    // change variable value here...
}

2020-05-04 23:30:29

在我们的例子中，我们通过在组件中添加changeDetection来FIXED，并调用ngAfterContentChecked中的detectChanges()，代码如下所示

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SpinnerComponent implements OnInit, OnDestroy, AfterContentChecked {

  show = false;

  private subscription: Subscription;

  constructor(private spinnerService: SpinnerService, private changeDedectionRef: ChangeDetectorRef) { }

  ngOnInit() {
    this.subscription = this.spinnerService.spinnerState
      .subscribe((state: SpinnerState) => {
        this.show = state.show;
      });
  }

  ngAfterContentChecked(): void {
      this.changeDedectionRef.detectChanges();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

2019-03-05 12:57:10

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

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

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

推荐文章

最新文章

标签