angular - 在 Angular 中获取复选框名称、值和选中状态

Question

我有以下 4 个复选框，是动态生成的。在 Angular 组件中，我想检索复选框的“名称”、“值”和“状态”。

HTML:

<input type="checkbox" 
       name="automotive" 
       value="car" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

<input type="checkbox" 
       name="automotive" 
       value="truck" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

<input type="checkbox" 
       name="apparel" 
       value="shirts" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

<input type="checkbox" 
       name="apparel" 
       value="pants" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

组件:

filterResults(obj: any, isChecked: boolean){
  console.log(obj);
  console.log(isChecked); // {}, true || false
} 

我能够获取复选框的状态，但不能获取名称和值。在打印到控制台时，obj 是未定义的。我想根据复选框的名称和值将过滤器应用于数据集。

如何获取选中复选框的名称和值，以便我可以这样做？

Answer 1

您可以将 ngModelChange 事件替换为 click 事件，在该事件中将 event 对象作为

(change)="GetStats($event)"

并在组件方法中，尝试获取名称、值和检查状态为

GetStats(event: Event) {
    console.log(event.target.name, event.target.value, event.target.checked);
}

在 stackblitz https://stackblitz.com/edit/angular-get-dynamic-checkbox-attributes 中查看更多信息