ExpressionChangedAfterItHasBeenCheckedError：表达式在使用 Float 检查后已更改答案

【问题标题】：ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked with FloatExpressionChangedAfterItHasBeenCheckedError：表达式在使用 Float 检查后已更改
【发布时间】：2019-06-30 15:50:02
【问题描述】：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'width: 93.7598541666%'. Current value: 'width: 93.7604513889%'.
    at viewDebugError (core.js:17871)
    at expressionChangedAfterItHasBeenCheckedError (core.js:17859)
    at checkBindingNoChanges (core.js:18059)
    at checkNoChangesNodeInline (core.js:27637)
    at checkNoChangesNode (core.js:27624)
    at debugCheckNoChangesNode (core.js:28228)
    at debugCheckDirectivesFn (core.js:28156)
    at Object.eval [as updateDirectives] (AppComponent.html:101)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:28145)
    at checkNoChangesView (core.js:27523)

我收到上述错误，但代码仍在继续

<div [ngStyle]="{
                  'margin-left':task.getFrontMargin(dayStart, hourResolution)*100+'%',
                  'width':task.getWidthPercent(dayStart, hourResolution)*100+'%'
                }" 
     class="flag" [ngClass]="task.type">
</div>

【问题讨论】：

什么是task.type？你在哪里设置？
task.getWidthPercent(dayStart, hourResolution) 导致问题。它的值在变化检测周期内变化。这意味着 task dayStart hourResolution 在您的代码中某处被更改。所以请分享您的完整 ts 和 html 代码。
是的，我在 getWidthPercent 调用的任务中有 getter，它每次都返回 new Date()。是这个问题吗？如何解决？

标签： angular

【解决方案1】：

当我们在开发者模式下使用angular工作时会出现这种错误，因为在开发者模式下，angular会执行两次检查以确认该属性的值是否与上次检查时相同。

现在，由于您的宽度会根据 getWidthPercent() 进行更改，因此会更改角度检查之间的宽度。这会提示错误。

要删除它，您可以使用 setTimeOut() 方法在 ngOnInit() 方法中设置宽度这样 - 使用打字稿中的本地引用和内部 ngOnInit 方法使用选择的 div

    @ViewChild('localReference') private element: ElementRef;

    ngOnInit() {
        setTimeOut(()=> {
            element.nativeElement.style.width = task.getWidthPercent(dayStart, 
            hourResolution)*100
        });
    }

【讨论】：