Drop down menu 禁用角度选择2

我正在编写angular2应用程序。 我需要我的所有按钮和选择被禁用，然后我需要启用它们。我想通过使用我的类字段来实现这一点，但是禁用了，但没有运气。 我有以下代码：

@组件({
选择器：“我的应用程序”，
模板：`
禁用启用
这是一个禁用的选择
{{level.name}
这是一个禁用的按钮
残废
为什么我不能以同样的方式禁用选择？
{{level.name}
`,
})
导出类AppComponent{
butDisabled=“disabled”；
levelNum：数字；
级别：数组=[
{num:0，名称：“AA”}，
{num:1，名称：“BB”}
];
}

我不明白为什么我不能使用{{butDisabled}}来禁用select。 我做错了什么？ 非常感谢

---

这里有一个

您可以像这样绑定到

[disabled]

属性：

已禁用
{{level.name}

在组件中，将变量设置为布尔值：

导出类AppComponent{
butDisabled:boolean=true；

---

例如使用

---

禁用选择时，比禁用按钮时要多一些，因此您需要使用disabled属性。与@rinukkusu所做的类似，我建议使用

[disabled]=“butDisabled”

---

以下是我创建的工作

您不能用简单的类禁用select。Bootstrap提供了一个提供简单设计的类，但它不足以用于大多数组件。 与第一次选择一样，您必须通过添加一个简单的ng2绑定将disabled属性添加到组件中

下面是一个工作示例

//我们的根应用程序组件
从'angular2/core'导入{Component，Directive，Output，EventEmitter，Input，SimpleChange}
从“rxjs/Observable”导入{Observable}；
从'rxjs/Observer'导入{Observer}；
@组成部分({
选择器：“我的应用程序”，
模板：`
禁用启用
{{level.name}
禁用/启用
`,
})
导出类AppComponent{
禁用=真；
级别=[{num:1，名称：'test'}]；
切换（）{
this.disabled=！this.disabled；
}
}

如果您想添加/删除单个类，我建议使用中的内置帮助程序。但是，正如前面所述，禁用对类的选择将不起作用。Angular2还有另一个属性帮助程序。使用属性功能，您可以对HTML执行此操作

<select type="number" [attr.disabled]="controlEnabled"></select>

---

对于您的情况，使用标记

[disabled]=“butDisabled”

就足够了，但值得注意的是这种方法不适用于被动表单，您可以在代码中禁用/启用控件：

this.form.get('myFormControlName').enable();
this.form.get('myFormControlName').disable();

---

这对我的Angular 8项目很有用。希望能有所帮助

<select [attr.disabled]="!name.valid ? 'disabled' : null" formControlName="gender">

---

尽管据说它使用了

[disabled]

，但它对我不起作用。我没有弄明白

但实际上

和

是html元素，而不是角度元素。要以原始方式禁用这些元素，只需在

标记中使用

disabled

要立即区分，您可以使用如下ng容器：

<ng-container *ngIf="element.isEditable === true; else notEditable"> 
    <select> 
        <option>
            ...
        </option>
    </select>
</ng-container>

<ng-template #notEditable> 
    <select disabled> 
        <option>
            ...
        </option>
    </select>
</ng-template>

...
...

用户可能会看到消息“看起来您正在将disabled属性与反应式表单指令一起使用。如果在组件类中设置此控件时将disabled设置为true，则实际上会在DOM中为您设置disabled属性。我们建议使用此方法以避免“选中后更改”错误。”在玩过这个之后，如果你需要动态更改控件是否被禁用，这是最好的选择，@TheRedPea声明避免了“检查错误后更改”。但是如果我们这样禁用，我们在提交表单时没有得到模型值，对此有什么想法吗？@shekharpatel最好问一个新问题：）当我使用它时，得到控制台中出现警告。看起来您正在将disabled属性与被动表单指令一起使用。如果将disabled设置为true…@Mahdi，请查看Matt的答案below@rinukkusu它的工作，非常感谢

<select [attr.disabled]="!name.valid ? 'disabled' : null" formControlName="gender">

<ng-container *ngIf="element.isEditable === true; else notEditable"> 
    <select> 
        <option>
            ...
        </option>
    </select>
</ng-container>

<ng-template #notEditable> 
    <select disabled> 
        <option>
            ...
        </option>
    </select>
</ng-template>