Question

在我的应用中，有一个getter每次都返回新日期，我想根据该日期更新元素的样式。这是简单的示例：

app.component.html

<h1>Gantt-Flexx</h1>
{{currentMillis}}

app.component.ts

export class AppComponent{
    get currentMillis(){
        return new Date().getTime()
    }
}

这会触发此错误

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: 1561881140820'. Current value: 'null: 1561881140880'.
    at viewDebugError (core.js:17871)
    at expressionChangedAfterItHasBeenCheckedError (core.js:17859)
    at checkBindingNoChanges (core.js:18059)
    at checkNoChangesNodeInline (core.js:27635)
    at checkNoChangesNode (core.js:27624)
    at debugCheckNoChangesNode (core.js:28228)
    at debugCheckRenderNodeFn (core.js:28182)
    at Object.eval [as updateRenderer] (AppComponent.html:2)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:28171)
    at checkNoChangesView (core.js:27525)

Answer 1

之所以发生这种情况，是因为您正在使用currentMillis将{{currentMillis}}分配给角度表达式，因此该函数get currentMillis()在每个变化检测周期都被触发。

尝试将console.log放到该函数中，然后查看（确保不要将函数分配给{{ }}，因为它会被不必要地调用并影响性能）。因此，每次运行更改检测时，它都会获得不同的值，因为time每毫秒更改一次。

请参阅ChangeDetection video以解决此确切问题及其发生原因

Answer 2

我也遇到了这个错误，我所做的解决方案只是获得时间的另一种方式：在您的html中：

<h1>Gantt-Flexx</h1>
{{currentMillis}}

和您的ts中，而不是getter中：

export class AppComponent{
  currentMillis:Date;

  constructor(){
    this.utcTime();
  }

   utcTime(): void {
        setInterval(() => {
            this.currDateTime = new Date();
        }, 1000);
    }

希望这对您有所帮助。当然，您可以根据需要更改setInterval函数中的值。

检查后表达式已更改。先前的值：'null：1561881140820'。当前值：“空：1561801140880”

2 个答案: