Angular 获取角度中的复选框名称、值和选中状态

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

HTML:

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

---

如何获取选中复选框的名称和值，以便执行此操作？

您可以向每个复选框添加动态id：

<input type="checkbox" [attr.id]="uniqueIdHere" ... >

然后访问复选框属性，如下所示：

var checkboxValue = (<HTMLInputElement>document.getElementById("uniqueIdHere")).value;

---

如果您的复选框是通过循环生成的，您可以将索引用作[attr.id]的一部分。

您可以向每个复选框添加一个动态id：

<input type="checkbox" [attr.id]="uniqueIdHere" ... >

然后访问复选框属性，如下所示：

var checkboxValue = (<HTMLInputElement>document.getElementById("uniqueIdHere")).value;

---

如果您的复选框是通过循环生成的，那么您可以将该索引用作[attr.id]的一部分。

最好了解您正在使用的版本。 这将是一种方法：

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

---

您必须在源属性中找到您要查找的所有属性。

最好了解您正在使用的版本。 这将是一种方法：

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

您必须在源属性中找到您要查找的所有属性。

您可以将ngModelChange事件替换为单击事件，并将事件对象作为

(change)="GetStats($event)"

在component方法中，尝试获取名称、值和选中状态

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

查看stackblitz中的更多内容

您可以将ngModelChange事件替换为click事件，在此处您可以将事件对象作为

(change)="GetStats($event)"

在component方法中，尝试获取名称、值和选中状态

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

---

查看stackblitz中的更多内容

我认为您可以做到这一点：

<input type="checkbox" 
       name="automotive" 
       value="car" 
       ngModel 
       (ngModelChange)="filterResults({name: 'automotive', value: 'car'}, $event)">

<input type="checkbox" 
       name="automotive" 
       value="truck" 
       ngModel 
       (ngModelChange)="filterResults({name: 'automotive', value: 'truck'}, $event)">

<input type="checkbox" 
       name="apparel" 
       value="shirts" 
       ngModel 
       (ngModelChange)="filterResults({name: 'apparel', value: 'shirts'}, $event)">

<input type="checkbox" 
       name="apparel" 
       value="pants" 
       ngModel 
       (ngModelChange)="filterResults({name: 'apparel', value: 'pants'}, $event)">

---

我认为你可以做到这一点：

<input type="checkbox" 
       name="automotive" 
       value="car" 
       ngModel 
       (ngModelChange)="filterResults({name: 'automotive', value: 'car'}, $event)">

<input type="checkbox" 
       name="automotive" 
       value="truck" 
       ngModel 
       (ngModelChange)="filterResults({name: 'automotive', value: 'truck'}, $event)">

<input type="checkbox" 
       name="apparel" 
       value="shirts" 
       ngModel 
       (ngModelChange)="filterResults({name: 'apparel', value: 'shirts'}, $event)">

<input type="checkbox" 
       name="apparel" 
       value="pants" 
       ngModel 
       (ngModelChange)="filterResults({name: 'apparel', value: 'pants'}, $event)">

---

Angular 7是我正在使用的版本。很好，上面的方法应该可以工作并获取您期望的所有值。另外，我个人更喜欢Angular Material Angular 7是我正在使用的版本。很好，上面的方法应该可以工作并获取您期望的所有值。我个人更喜欢有棱角的材料