如何取消选中angular2中的复选框

Question

我在 HTML 文件中有这样的代码

 <tr *ngFor="#tradeSource of tradeSources">
     <td>
         <label>
         <input type="checkbox" ngControl="tradeSource"    [(ngModel)]="tradeSource['checked']"/>
         </label>
     </td>           
     <td>{{tradeSource.blah}}</td>
     <td>{{tradeSource.blah}}</td>
     <td>{{tradeSource.blah}}</td>
</tr>

用户可以选中复选框，然后单击 "Process" 按钮，这将运行一些代码，在此代码具有运行之后，我想取消选中此复选框。我试过像

这样的代码

this.tradeSources[i]['checked'] = false

但这不起作用

Answer 1

您应该尝试的代码是：

this.tradeSources[i]['checked'] = false

编辑

我认为你的问题是因为每个复选框控件的名称都相同:

<input type="checkbox" ngControl="tradeSource"  
       [(ngModel)]="tradeSource.checked"/>

如果删除 ngControl 属性，它会起作用：

<input type="checkbox" [(ngModel)]="tradeSource.checked"/>

看到这个 plunkr：https://plnkr.co/edit/FdPHpOTSySkg2gLWjo7a?p=preview。

如果你真的想要一个 ngControl 你可以这样定义它：

<tr *ngFor="#tradeSource of tradeSources;#i=index">
  <td>
    <label>
      <input type="checkbox" [ngControl]="'trade'+i" 
             [(ngModel)]="tradeSource.checked"/>
    </label>
  </td>           
  (...)
</tr>

Answer 2

我认为这不起作用的原因是未绑定 ngControl 的使用，并且可能还会在您的控制台中引发错误。只需执行以下操作就足够了：

<input type="checkbox" [(ngModel)]="tradeSource['checked']">

如何取消选中angular2中的复选框

How to uncheck a checkbox in angular2

html

checkbox

angular