Angular 2中与[disabled]双向绑定

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

---

尝试使用ng-disabled。 - O. Paquay

@O.Paquay 这是 Angular 而不是 AngularJS（Angular 1）。 - Pankaj Parkar

Answer 1

你需要为输入框添加一个名字属性，并通过用括号包裹来实现双向绑定。此外，不需要使用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>

- Sachila Ranawaka

Answer 2

主要问题是您在两个选项中使用了相同的值 0 。但即使您将它们分别更改为启用和禁用的 1 和 0 ，它也不会起作用，因为 value 属性将值存储为'0'（字符串'0'）和'1'（字符串 1 ）（简而言之，它的值被字符串化）。

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

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

Plunker演示

- Pankaj Parkar

Answer 3

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

Answer 4

尝试使用true\false替代[disabled]，这将节省您的函数比较器，并直接使用双向绑定。

例如：

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

查看 Plunker

- anoop