Angular2：値が選択されていない場合はselectにクラスを追加/値の場合は除外

Question

コンボセレクトを実行しています。値が選択されると、各セレクトにクラスを配置する必要があります。そのような

私のコンポーネントの外観：

constructor() { 

      this.select = { 
       'ELEM1': ['VALUE1'], 
       'ELEM2': ['VALUE1', 'VALUE2', 'VALUE3'] 
      }; 
     } 

     ngOnInit() { } 

     keys() : Array<string> { 
      return Object.keys(this.select); 
     } 

     selectOnChange(value): void { 
      this.subSelect = this.select[value]; 
     } 

私のHTMLは、次のようになります。事前に

<div class="form-group"> 
     <label> 
      <select [class.placeholder]="noValueSelected1" class="form-control" (change)="selectOnChange($event.target.value)"> 
       <option value="">Select1</option> 
       <option *ngFor="let key of keys()" [attr.value]="key">{{ key }}</option> 
      </select> 
     </label> 
    </div> 
    <div class="form-group"> 
     <label> 
      <select [class.placeholder]="noValueSelected2" class="form-control"> 
       <option value="">Select2</option> 
       <option *ngFor="let item of ciaSubSelect" [attr.value]="item">{{ item }}</option> 
      </select> 
     </label> 
    </div> 

感謝を。

Answer 1

あなたはcssクラスを設定するためにngClassを使用できます。

コードの下に確認してください。

<select [ngClass]="{'yourCssclass':subSelect === ''}" class="form-control" (change)="selectOnChange($event.target.value)"> 
      <option value="">Select1</option> 
      <option *ngFor="let key of keys()" [attr.value]="key">{{ key }}</option> 
     </select> 

はそれが役に立てば幸い！