角度复选框标签不触发更改事件 [英] Angular checkbox labels not firing change events

问题描述

我已经实现了一个组复选框组件，如本SO帖子中所述: Angular如何获取多个复选框的值?

i have implemented a group checkbox component as explained in this SO post: Angular how to get the multiple checkbox value?

一切正常，除了我有一个问题，复选框的标签不触发更改事件，仅触发实际的复选框部分.在下面的导航栏中，尝试同时单击复选框方框和标签，都触发复选框并更新数据模型，但是只有复选框部分会触发更改.我怀疑这与被包含的价值有关.

All is working well except i have one issue, the labels of the check boxes do not trigger change events, only the actual checkbox portion. In the plunker below, try clicking both the checkbox square and the label, both trigger the checkbox and update the data model but only the checkbox portion fires a change. I suspect its something to do with the transcluded value.

看到这个矮人 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>

推荐答案

在单击事件侦听器上使用，而不是在更改时使用.像这样

Use on click event listener instead of on change. like this

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

这篇关于角度复选框标签不触发更改事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！