Angular 4选择禁用不起作用

Question

我想在 Angular 4 中禁用 select。 我写了如下代码，但 select 没有被禁用。

在组件中:

import { FormBuilder, Validators, FormGroup } from '@angular/forms';    

this.eventForm = this.formBuilder.group({
    // ... some codes ...
    'state': [true, Validators.required],
    'stepStrengh': [10, Validators.nullValidator]
});

在 HTML 中:

<input type="radio" formControlName="state" [value]="true"/> Enable Step
<input type="radio" formControlName="state" [value]="false"/> Disable Step

<select formControlName="stepStrengh" [disabled]="!eventForm.get('timeslots').value">
  <option [ngValue]="10">10 steps</option>
  <option [ngValue]="15">15 steps</option>
</select>

当我将 [disabled]="true" 添加到 option 标签时，该选项标签被禁用，但我想禁用 select 标记自身。

我试过这样-

<select formControlName="stepStrengh" disabled="{{state ? '': 'disabled'}}">

但这也不起作用，当我将状态变量从 true->false 或 false->true 更改

Answer 1

在阅读了一些文档和其他内容后，我发现这种方法对我很有效

<select [attr.disabled]="state ? '' : null" formControlName="stepStrengh" >

希望对您有所帮助。

Here is a link to stackblitz