当绑定到ngModel验证时，Angular ngClass触发更改检测错误

Question

我正在尝试在Angular 2中设置标签的颜色，具体取决于它的电子邮件验证：

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

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

  

错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后发生了变化。上一个值：'错误'。当前价值：'无'。

所以我的问题是：

1. 为什么会显示此消息？
2. 做正确的方法是什么？

Answer 1

为什么会显示此消息？

您可以在this issue

中找到对原因的详细解释

  

这不是一个错误，它是开发模式按预期工作的功能。调用enableProdMode（） - 引导应用程序时可以防止抛出异常。

     

也就是说，它被抛出是有充分理由的：简而言之，在每轮变更检测之后，开发模式立即执行第二轮以验证自第一轮结束以来没有任何绑定发生变化，因此表示更改检测本身会导致更改。

     

在你的插件中，你有绑定[attr.spinner] = isLoading，并且由于你调用this.load（）而导致isLoading发生变化，这在ngAfterViewInit被触发时发生，这是作为初始化的一部分发生的改变检测转向。这本身并没有问题 - 问题是this.load（）更改了绑定但没有触发新一轮的更改检测，这意味着在未来的一轮更改检测之前不会更新此绑定

做正确的方法是什么？

只需将[ngClass]替换为[class]即可。我不知道为什么，但是当我试图在一个plunker中重现你的问题时，我发现[class]不会触发错误。

编辑：使用ng-invalid类

您还可以根据角度等级ng-invalid设置元素的样式。

请参阅this plunker