javascript - Angular 2 与[禁用]的双向绑定(bind)

Question

根据另一个输入的 ngModel，我有一个带有 [disabled] 的输入。最初 [disabled] 工作正常，但当我们更改相关输入值时，[disabled] 属性不起作用。如何在 [disabled] 属性上应用两个绑定(bind)？

以下是代码片段。

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

Answer 1

主要问题是您对两个选项使用相同的 value 0。但是，即使您将它们分别更改为 1 和 0 以用于 Enable 和 Disable。它不会起作用，因为 value 属性将值存储为 '0'(string '0') & '1'(string 1) (简而言之，将它的值字符串化)。

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

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

Plunker Demo