我从子组件(计时器渲染器)得到 ExpressionChangedAfterItHasBeenCheckedError,Angular 7
I got ExpressionChangedAfterItHasBeenCheckedError from child compoenent (timerrenderer), Angular 7
我的子组件出现 ExpressionChangedAfterItHasBeenCheckedError 错误。我试图在 ngOnchanges 中添加 detectChanges() 方法,但它没有用。我是 angular 的新手。我也尝试了其他问题的解决方案,但对我没有用。
ngOnInit() {
if (this.IsInGrid === false) {
this.duration = this.Duration * 60 * 60 * 1000;
this.startDate = this.StartDate;
this.timerText();
this.init(null);
}
}
ngOnChanges() {
this.changeDetector.detectChanges();
}
ngAfterViewChecked() {
this.changeDetector.detectChanges();
}
agInit(params: any): void {
this.params = params;
this.init(params);
}
init(params: any) {
}
timerText(): string {
if (this.StartDate == null) {
return "";
}
this.elapsed = new Date().getTime() - this.StartDate.getTime();
if (this.elapsed > this.duration) {
this.isPassed = true;
}
return this.msToTime(this.elapsed);
}
msToTime(ms, delim = ' : ') {
const showWith0 = value => (value < 10 ? `0${value}` : value);
const days = Math.floor((ms / (1000.0 * 60 * 60 * 24)));
const hours = showWith0(Math.floor((ms / (1000.0 * 60 * 60)) % 24));
const minutes = showWith0(Math.floor((ms / (1000.0 * 60)) % 60));
if (days > 0)
return `${days}d ${hours}h ${minutes}m`;
if (hours > 0)
return `${hours}h ${minutes}m`;
return `${minutes} minutes`;
}
refresh(params: any): boolean {
return true;
}
}
调试这些错误有点魔法。虽然我无法对您的代码发表评论,但我可以为您提供一些帮助我摆脱它们的建议。
据我所知,在设置并检查初始值后更新 属性 时会显示此消息。
首先,尝试使用 Angular 生命周期挂钩 https://angular.io/guide/lifecycle-hooks 设置这些值,特别是 ngAfterViewInit()。使用 ngOnChanges() 可能会影响性能。
我将 changeDetection: ChangeDetectionStrategy.OnPush 添加到我的组件中,它似乎对我有用。
我为我的解决方案找到了正确的解释。
来源:
https://medium.com/@bencabanes/angular-change-detection-strategy-an-introduction-819aaa7204e7
我的子组件出现 ExpressionChangedAfterItHasBeenCheckedError 错误。我试图在 ngOnchanges 中添加 detectChanges() 方法,但它没有用。我是 angular 的新手。我也尝试了其他问题的解决方案,但对我没有用。
ngOnInit() {
if (this.IsInGrid === false) {
this.duration = this.Duration * 60 * 60 * 1000;
this.startDate = this.StartDate;
this.timerText();
this.init(null);
}
}
ngOnChanges() {
this.changeDetector.detectChanges();
}
ngAfterViewChecked() {
this.changeDetector.detectChanges();
}
agInit(params: any): void {
this.params = params;
this.init(params);
}
init(params: any) {
}
timerText(): string {
if (this.StartDate == null) {
return "";
}
this.elapsed = new Date().getTime() - this.StartDate.getTime();
if (this.elapsed > this.duration) {
this.isPassed = true;
}
return this.msToTime(this.elapsed);
}
msToTime(ms, delim = ' : ') {
const showWith0 = value => (value < 10 ? `0${value}` : value);
const days = Math.floor((ms / (1000.0 * 60 * 60 * 24)));
const hours = showWith0(Math.floor((ms / (1000.0 * 60 * 60)) % 24));
const minutes = showWith0(Math.floor((ms / (1000.0 * 60)) % 60));
if (days > 0)
return `${days}d ${hours}h ${minutes}m`;
if (hours > 0)
return `${hours}h ${minutes}m`;
return `${minutes} minutes`;
}
refresh(params: any): boolean {
return true;
}
}
调试这些错误有点魔法。虽然我无法对您的代码发表评论,但我可以为您提供一些帮助我摆脱它们的建议。
据我所知,在设置并检查初始值后更新 属性 时会显示此消息。
首先,尝试使用 Angular 生命周期挂钩 https://angular.io/guide/lifecycle-hooks 设置这些值,特别是 ngAfterViewInit()。使用 ngOnChanges() 可能会影响性能。
我将 changeDetection: ChangeDetectionStrategy.OnPush 添加到我的组件中,它似乎对我有用。 我为我的解决方案找到了正确的解释。
来源:
https://medium.com/@bencabanes/angular-change-detection-strategy-an-introduction-819aaa7204e7