Angular 2 与\[禁用\]的双向绑定

Question

我有一个输入 [disabled] 取决于另一个输入的 ngModel 。最初 [disabled] 工作正常，但当我们更改依赖输入值时， [disabled] 属性不起作用。如何在 [disabled] 属性上应用两个绑定？

以下是代码片段。

 <select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option value="0">Disabled</option>
<option value="0">Enabled</option>
</select>

此模型 isDisabled 已正确更改。我可以在模板 {{isDisabled}} 中看到这样的值变化。但是没有体现在选择框的 [disabled] 属性中。

 <select [ngModel]="userInput" [disabled]="isDisabled">
<option value="test">Test</option>
</select>

原文由 Vishnu Sureshkumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

主要问题是您对两个选项都使用相同的 value 0。但是，即使您将它们更改为 1 ＆ 0 Disable 用于 Enable It will not gonna work because value attribute stores values as '0' (string ‘0’) & '1' (string 1 ) (in short stringify 它的值）。

您可以使用 ngValue 属性绑定轻松解决此数据类型问题。

 <select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
  <option [ngValue]="1">Disabled</option>
  <option [ngValue]="0">Enabled</option>
</select>

柱塞演示

原文由 Pankaj Parkar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在您的问题中，两个选项值都是 0 。

您需要确保一个是 true ，另一个是 false

---

零件：

 component class {
    myVar = false
}

模板：

 <select [(ngModel)]="myVar">
    <option value="true">...</option
    <option value="false">...</option
</select>

<select [disabled]="myVar">
    <option>...</option
</select>

原文由 David Alsh 发布，翻译遵循 CC BY-SA 3.0 许可协议