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

您可以使用类绑定来执行此操作:

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

Answer 2

是的,有一个更好的方式使用这样的ngClass属性:

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