Angular 2 更新 [已禁用]答案

【问题标题】：Angular 2 Update [disabled]Angular 2 更新 [已禁用]
【发布时间】：2017-07-21 14:29:25
【问题描述】：

我正在尝试根据另一个选择的值（真/假）动态启用/禁用一组选择输入。但是，它似乎只适用于初始页面加载。

在禁用选择输入的情况下加载表单。当我将控制输入更改为 true 时，其他输入现在已启用。

但是，在初始启用后它们不会变回。

我的代码如下：

<tr *ngFor="let prod of seg.products">
    <td>{{prod.name}}</td>
    <td>
        <!-- The controlling selector -->
        <select [(ngModel)]="prod.isAffected" name="{{prod.name + 'AffectedSelector'}}">
            <option [value]="false" select>No</option>
            <option [value]="true">Yes</option>
        </select>
    </td>

    <!-- These load as disabled and can be changed only once -->
    <td *ngFor="let plat of platformList;let j=index">
        <select  name="{{prod.name + 'NASelector' + j}}" [disabled]="prod.isAffected">
            <option value="false" selected>No</option>
            <option value="true">Yes</option>
        </select>
    </td>
</tr>

在组件中，我尝试将isAffected 值初始化为false 和null，结果完全相同。

我也尝试过使用prod.isAffected ? true : null (and false)。

我也尝试过只使用[ngClass]={'disabled' : prod.isAffected}。

我错过了什么吗？

【问题讨论】：

如果您更改按钮或输入的选择，它是否有效？只是试图排除选择是一个问题。

标签： angular

【解决方案1】：

您的问题是因为您在选项中使用了[value]="true"。默认情况下，这会将一个字符串绑定到您的[(ngModel)]，该字符串在[disabled] 上无法解释为布尔值。你应该改用[ngValue]，问题就解决了。

    <div *ngFor="let prod of products">
    <div>
      <select [(ngModel)]="prod.isAffected" name="{{prod.name + 'AffectedSelector'}}">
            <option [ngValue]="false">No</option>
            <option [ngValue]="true">Yes</option>
      </select>
      <select  name="{{prod.name + 'NASelector'}}" [disabled]="!prod.isAffected">
            <option value="false">No</option>
            <option value="true">Yes</option>
        </select>
    </div>
    </div>

我为你做了一个工作 plunkr https://plnkr.co/edit/fCms5SMxTGLjE9KzXwBC?p=preview

【讨论】：

【解决方案2】：

我已经对此进行了一些阅读，似乎从 RC6 开始，他们删除了以两种方式绑定到 this 的能力。现在您必须监视控件的更改事件并根据您的条件调用.enable() 或.disable()。

另一个 SO 问题可以在 here 找到，实际的 Angular 问题正在 Github here 上进行跟踪

【讨论】：

感谢您的提示。当您说使用.enable()/.disable() 时，您的意思是从 DOM 中检索选择元素并从组件中调用这些方法吗？
可以，订阅onChange事件，可以从eventHandler中的$event参数中获取元素。

【解决方案3】：

如果您使用的是表单，看起来您就是这样......

您只是缺少细节，即第二次选择中的ngModel。这会将字段绑定到表单，使其成为表单中的表单控件。

<select name="{{prod.name + 'NASelector' + j}}" ngModel 
         [disabled]="prod.isAffected">
   <option value="false" selected>No</option>
   <option value="true">Yes</option>
</select>

演示：http://plnkr.co/edit/iZyicZLUC1IYHcAsA9zx?p=preview

【讨论】：