[英]Angular Loading Error ExpressionChangedAfterItHasBeenCheckedError
[英]Angular Error: ExpressionChangedAfterItHasBeenCheckedError
我对Angular 4有一点问题。抛出以下错误
错误:ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。 之前的价值:'225px'。 当前价值:' - 215050x'。
这是我的HTML:
<div class="channelRow" *ngFor="let epgChannel of channelGroupEpg?.epgChannels">
<div class="epgChannelList">
{{epgChannel.channel.name}}
</div>
<template ngFor let-epgDate [ngForOf]="epgChannel.dates">
<div class="epgEntry"
*ngFor="let epgProgram of epgDate.programs"
[style.width]="getWidth(epgProgram, epgDate.date)"
(click)="selectProgram(epgProgram)"
data-toggle="modal"
data-target="#detailModal">
{{epgProgram.title}}
</div>
</template>
</div>
这就是错误的来源:
getWidth(program: EPGProgram, date: Date) {
let min = this.helperService.getDurationByProgramInMinutes(program);
let startDate = new Date(program.start.getFullYear(), program.start.getMonth(), program.start.getDate(), 0, 0, 0, 0);
let stopDate = new Date(program.stop.getFullYear(), program.stop.getMonth(), program.stop.getDate(), 0, 0, 0, 0);
if (startDate.getTime() !== date.getTime()) {
let minNextDay = this.helperService.getMinutesToNextDay(program.start, date);
min = min - minNextDay;
}
if (stopDate.getTime() !== date.getTime()) {
let minNextDay = this.helperService.getMinutesToLastDay(program.stop, date);
min = min - minNextDay;
}
let width = min * 5;
return width.toString() + 'px';
}
有人能告诉我,为什么会这样?
组件状态在检查后发生了变化......
采用
this._changeDetectionRef.detectChanges();
在你的方法结束时,不要忘记添加
private _changeDetectionRef : ChangeDetectorRef
作为拥有您的方法的Component的构造函数的参数。
请参阅这里的讨论
发生此错误的原因是您在角度输出HTML之前更改变量。 所以,你能做的是。 加载内容时更改变量。 解。
import { AfterContentInit } from '@angular/core';
ngAfterContentInit(){
// write your code here
}
快速解决方法是将代码放在setTimeout()中。
我输出了同样的错误。 经过长时间的研究,我发现它是在输入到html模板的数据在角度刷新html之前发生变化时引起的。 切换到生产模式时,不会显示此错误。 有关更多信息,请参阅此问题 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.