Angular 2 与 [disabled] 的双向绑定答案

【问题标题】：Angular 2 Two way binding with [disabled]Angular 2 与 [disabled] 的双向绑定
【发布时间】：2017-11-02 05:59:24
【问题描述】：

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

下面是代码sn-p。

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

【问题讨论】：

尝试使用 ng-disabled
@O.Paquay 这是 Angular 而不是 AngularJS(Angular 1)

标签： javascript angular angular2-directives

【解决方案1】：

您需要在输入中添加一个名称属性，并通过用括号括起来来进行 ng-mode 双向绑定。无需为此使用ngModelChange

<select [(ngModel)]="isDisabled"  name='isDisabled'>
        <option value="0">Disabled</option>
        <option value="1">Enabled</option>
</select>
<select [(ngModel)]="userInput" [disabled]="isDisabled == '0'" name='userInput'>
        <option value="test">Test</option>
</select>

【讨论】：

【解决方案2】：

尝试将true\false 用于[disabled]，它将保存您的函数比较器，并直接使用2路绑定。

喜欢：

<select [(ngModel)]="isDisabled">
        <option value="true">Disabled</option>
        <option value="false">Enabled</option>
</select>

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

See Plunker

【讨论】：

【解决方案3】：

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

您可以通过使用ngValue 属性绑定轻松解决这个dataType 值问题。

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

Plunker Demo

【讨论】：

【解决方案4】：

在您的问题中，两个选项值都是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>

【讨论】：