javascript - 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 的每一侧渲染输入两次更好的方法？

谢谢!

Answer 1

您可以使用类绑定(bind)来做到这一点:

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