触发 onChange 时获取复选框状态答案

【问题标题】：get checkbox state when onChange is triggered触发 onChange 时获取复选框状态
【发布时间】：2018-05-31 00:10:08
【问题描述】：

我正在玩 angular 和 bootstrap。这个问题非常琐碎。我的 html 中有输入元素

  <label><input  (change)="callFilt()"  type="checkbox" 
    value="">{{item.name}}</label>

我想在我的 callFilt 方法中获取复选框的状态。我看到它可以通过 ng-model 实现，但我不想在这里使用任何其他指令，有没有办法发送复选框的状态？

我不想在我的 js 代码中设置复选框的 ID 并通过 ID 获取状态。

【问题讨论】：

【解决方案1】：

您可以使用 sintax #myInputVariabile 在标记中创建变量引用，并将其传递给函数 callFilt(checkInput)。类似：

<label><input  (change)="callFilt(checkInput)"

#checkInput type="checkbox" value="">{{item.name}}

   callFilt(element) {
    console.log(element.checked)
  }

【讨论】：

是的，行之有效。你认为这是一个好方法吗？有什么问题吗？
hostelly 我会使用 ngModel 的原因很简单，因为我们希望尽可能多地解耦我们可以查看的业务逻辑，一些异常可以在结构指令中完成，但这是另一回事。你有什么特别的理由不想使用 ngModel 吗？
无论如何我没有看到任何问题。

【解决方案2】：

你可以通过这个方法获得购买价值

<label><input  (change)="callFilt(this)"  type="checkbox" 
    value="">{{item.name}}</label>

.现在在函数中

 callFilt(e) {
    console.log(e.checked); // or 
    console.log(e.value); //depending input type
  }

【讨论】：

你能用这个方法检查一下吗？例如 this.checked
我也尝试过这种方法未定义，它看起来不像我们在 vanilla JS 中使用的常用模式
所以，实际上，如果我们发送“this”，我们将指向打字稿文件中的组件逻辑，而不是指向触发事件（在本例中为 onchange）的当前元素。你可以测试为： HOLA callFilt(element,_this) { console.log( element.checked) console.log(_this) }