如何在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

但是这并不起作用。

- Mufasatheking

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>

- Thierry Templier

---

抱歉，这已经是代码中的内容了，我在发布时打错了一个字。 - Mufasatheking

好的。实际上，这是因为您的 ngControl 为每个复选框设置了相同的名称... - Thierry Templier

这个完美地运作了，保持ngControl的解决方案也很好，谢谢。 - Mufasatheking

plnkr出了问题。 - crh225

Answer 2

我认为这个不起作用的原因，很可能也会在你的控制台中抛出一个错误，是因为未绑定的 ngControl 的使用。只需要这样做就足够了：

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

- Poul Kruijt