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>

希望它有所帮助!!

Angular2：如果没有选择值，则在select上添加class /如果为value则删除

1 个答案: