Angular 4 - 条件 CSS 类

Question

我正在开发 Angular 4 应用程序，我们在其中向用户提供登录信息。登录可能会失败，返回时，我们会监听错误：-

 .subscribe(error => {
            this.error = error;
        });

这显示很好，我们显示：-

 <div *ngIf="error">
   <p class="error-message">{{ error.ExceptionMessage }}</p>
</div>

在此上方是带有类的用户名和密码的标准输入字段。我希望能够在不执行以下操作的情况下向其中添加一个 error 类：-

 <div *ngIf="error">
    <input type="email" class="form-control" />
</div>
<div *ngIf="!error">
    <input type="email" class="form-control error-field" />
</div>

有没有比在 if 的每一侧渲染输入两次更好的方法？

谢谢！

原文由 Mike Upjohn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用类绑定来做到这一点：

 <input type="email" class="form-control" [class.error-field]="error">

原文由 Poul Kruijt 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

是的，有更好的方法使用 ngClass 属性，如下所示：

 <input type="email" [ngClass]="{'form-control': true, 'error-field': error}" />

原文由 samAlvin 发布，翻译遵循 CC BY-SA 3.0 许可协议