Angular2 :如果未选择任何值，则在选择时添加类/如果值则删除

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

你可以

使用 ngClass 来设置 css 类。

请检查以下代码：

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

希望对您有所帮助！！