如何通过单击父 <label> 元素来获取输入字段的状态？

Question

我在带有 bootstrap 4 和 Angular 7 的 html 中的标签标签内有一个输入复选框字段。我在单击输入复选框时调用一个函数并将其状态“($event.target.checked)”作为其中之一传递论据。但我收到的只是“未定义”。另一方面，如果我直接从 input:checkbox 调用该函数，即没有标记 ass 父元素，那么它工作得很好。但我需要前一个选项才能工作。

案例 1： ">div>

label (click)="onChange('father', $event.target.checked, 'diabetes')" class="btn btn-sm rounded-pill position-relative mb-2 mx-2"> input type="checkbox" name="diabetes" autocomplete="off"> 父亲 /标签 "

案例 2： ">div>

input type="checkbox" (click)="onChange('father', $event.target.checked, 'diabetes')" name="" id="">Father /div>"

当我在我的函数中同时控制上述两种情况时，我在输入字段之外收到带有标签的第一种情况下的未定义，并且它在没有标签的情况下工作得很好，如案例 2 所示，并提供真假作为结果。任何人都可以帮助我在案例 1 中获得真假值。

Answer 1

那是因为您在复选框上听到点击事件。

Intsead，你应该听(change)事件：

(change)="onChange('father', $event, 'diabetes')" 

这样，每次复选框的值更改时都会调用该函数。