Forms 绑定到ngModel验证时，角度ngClass触发更改检测错误

我试图根据邮件验证设置Angular 2中标签的颜色，如下所示：

<input type="email" name="email" [(ngModel)]="email" email #currentEmail="ngModel" [ngClass]="currentEmail.invalid ? 'error' : 'none'">

它在我的页面上按预期工作，但是在Visual Studio代码中，我收到以下错误消息：

错误：ExpressionChangedTerrithasBeenCheckedError:表达式在检查后已更改。上一个值：“错误”。当前值：“无”

因此，我的问题是：

为什么会显示此消息？ 完成这项任务的正确方法是什么？ 为什么会显示此消息？ 你可以在中找到一个很好的解释

这不是一个bug，它是dev模式的一个特性，可以按预期工作。调用enableProdMode-引导应用程序时，会阻止引发异常

这就是说，抛出它有很好的理由：简言之，在每一轮更改检测之后，dev mode立即执行第二轮，以验证自第一轮结束以来没有任何绑定发生更改，因为这将表明更改是由更改检测本身引起的

在plunk中，绑定[attr.spinner]=isLoading，并且由于调用this.load而导致isLoading更改，这在启动ngAfterViewInit时发生，这是初始更改检测回合的一部分。但这本身并没有问题-问题是this.load会更改绑定，但不会触发新一轮的更改检测，这意味着该绑定在未来的某一轮更改检测之前不会更新

完成这项任务的正确方法是什么？ 只需将[ngClass]替换为[class]。我不知道为什么，但当试图在plunker中重现您的问题时，我发现[class]不会触发错误

编辑：使用无效的类 您还可以根据angular类设置元素的样式

---

请参见

非常感谢，将[ngClass]更改为[class]解决了问题。在Angular github repo上存在一些问题，关于ngClass如何与changeDetector合作。看到或