Question

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

一切正常但除了我有一个问题，复选框的标签不会触发更改事件，只触发实际的复选框部分。在下面的plunker中，尝试单击复选框方块和标签，都会触发复选框并更新数据模型，但只有复选框部分会触发更改。我怀疑它与被赎回的价值有关。

查看此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>

Answer 1

在点击事件监听器上使用而不是在更改时使用。像这样

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

Answer 2

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

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

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

通过使用 ngModel 和 ngModelChange，您可以拆分香蕉盒 [(ngModel)]，以便您可以自己进行更改（可能还有其他工作），而不是 {{1 }}，它自己做一个“简单的”[(ngModel)]-update。

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

2 个答案: