角度复选框标签不触发更改事件答案

【问题标题】：Angular checkbox labels not firing change events角度复选框标签不触发更改事件
【发布时间】：2018-04-26 05:28:18
【问题描述】：

我已经实现了一个组复选框组件，如这篇 SO 帖子中所述： Angular how to get the multiple checkbox value?

除了我有一个问题之外，一切都运行良好，复选框的标签不会触发更改事件，只会触发实际的复选框部分。在下面的 plunker 中，尝试同时单击复选框方块和标签，两者都会触发复选框并更新数据模型，但只有复选框部分会触发更改。我怀疑它与嵌入值有关。

看到这个笨蛋 http://plnkr.co/edit/BAhzLYo9e4H8PdAt9lGR?p=preview

代码

<checkbox-group [(ngModel)]="selectedItems">
   <checkbox *ngFor="let item of availableItems" 
             [value]="item"
             (change)="onItemChange($event, item)">
             {{item}}
   </checkbox>
 </checkbox-group>
 <p>Selected items - {{selectedItems | json}}</p>

【问题讨论】：

标签： forms angular checkbox

【解决方案1】：

如果您使用ngModel，您也可以使用(ngModelChange) 事件。我有一些普通的复选框<input type="checkbox"/>，(click) 和(change) 事件永远不会被触发。使用(ngModelChange)，它可以工作（如果它们使用ngModel，它还应该与<input type="checkbox"/> 以外的其他标签一起工作）：

<input type="checkbox"
       (ngModelChange)="selectAllForBatchImport($event)"
       [ngModel]="areAllEntriesChecked"/>

如果 ngModelChange 从复选框中触发，$event 参数将是一个布尔值（而不是例如使用 (click) 或 (change) 时的 MouseEvent）。

通过使用ngModel 和ngModelChange，您可以拆分香蕉盒[(ngModel)]，这样您就可以自己进行更改（可能还有其他工作），而不是[(ngModel)]，后者执行“简单" ngModelChange-自行更新。

【讨论】：

【解决方案2】：

使用单击事件侦听器而不是更改。像这样

(click)="onItemChange($event, item)"

【讨论】：

太棒了，谢谢！你能解释一下为什么（改变）工作了一半，所以我有更好的理解吗？
我认为问题与您使用的复选框指令有关。如果您将输入标签包装在标签标签中，那么您的更改事件将顺利进行。在你的 plunker Test 中试试这个