web-dev-qa-db-ja.com

Angular 4-条件付きCSSクラス

私は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の両側で入力を2回レンダリングするよりも良い方法はありますか？

ありがとう！

javascriptjqueryangular
11
Mike Upjohn

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

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

ええ、次のようなngClass属性を使用するより良い方法があります。

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

NgClassまたはNgStyleを探していると思います： https://angular.io/api/common/NgClasshttps://angular.io/api/common/NgStyle

2
Sean Normoyle