角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> 

場合のそれぞれの側に、二回の入力をレンダリングするより良い方法はありますか？

ありがとうございます！

Answer 1

あなたはバインディングクラスを使用してこれを行うことができます。

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

Answer 2

私はあなたがNgClassやNgStyleを探していると信じて： https://angular.io/api/common/NgClass https://angular.io/api/common/NgStyle

Answer 3

ええ、このようngClass属性を使用して、より良い方法があります：

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