如何取消选中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>

用户可以选中复选框，然后单击将运行某些代码的“处理”按钮，在此代码运行后，我想取消选中此复选框。我试过像

这样的代码

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']">