Question

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

表单加载时禁用选择输入。当我将控制输入更改为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}。

我错过了什么吗？

Answer 1

我已经对此进行了一些阅读，似乎从RC6中他们删除了以双向方式绑定到此的能力。现在，您必须监控变更事件的控件，并根据您的条件致电.enable()或.disable()。

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

Answer 2

您的问题是由于您在选项上使用[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>

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

Answer 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

Angular 2更新[已禁用]

3 个答案: